禁用 NextJs 实验性应用程序目录

Question

我正在做一个现实生活中的项目，决定测试 Next js 13 版本附带的新 App 目录，我注意到一些问题，比如我的图像和字体无法正确加载等。我想停止使用实验性的应用目录 有没有办法在本地选择退出实验应用程序目录而不必重新安装下一个应用程序？请我是 Next js 的新手。

这是我的 next.config.js

/** @type {import('next').NextConfig} */
const path = require("path");

const nextConfig = {
  experimental: {
    appDir: true,
  },
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "/",
  },
};

module.exports = nextConfig;

每当我将 appDir 设置为 false 时，我都会收到以下错误

Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config
    at Object.findPagesDir (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\lib\find-pages-dir.js:80:19)
    at DevServer.getRoutes (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\dev\next-dev-server.js:141:59)
    at new Server (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\base-server.js:115:47)
    at new NextNodeServer (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\next-server.js:73:9)
    at new DevServer (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\dev\next-dev-server.js:100:9)
    at NextServer.createServer (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\next.js:152:24)
    at C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\next.js:165:42
    at async NextServer.prepare (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\next.js:134:24)
    at async Server.<anonymous> (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\lib\render-server.js:92:17) {
  type: 'Error'
}

Answer 1

基于https://nextjs.org/docs/messages/experimental-app-dir-config

中的文档

如果您还不想使用新的 app/ 目录功能，但有一个名为 app/ 的目录，请将目录重命名为其他名称。

尝试重命名或删除

app/

目录，并删除

appDir: true

中的

next.config.js

。如果您打算删除

app/

目录，请将页面文件移动到

src/pages

.