英文:
Disabling NextJs experimental app directory
问题
I'm working on a real life project and decided to test the new App directory that comes with the Next.js 13 version, I noticed some glitches like my images and fonts not loading properly, etc. I would like to stop using the experimental app Dir. Is there a way to opt out of the experimental app directory locally without having to reinstall next-app?, please I'm new to Next.js.
Here is my 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;
Whenever I put the appDir as false, I get the following error
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'
}
英文:
I'm working on a real life project and decided to test the new App directory that comes with the Next js 13 version, I noticed some glitches like my images and fonts not loading properly, etc. I would like to stop using the experimental app Dir.
Is there a way to opt out of the experimental app directory locally without having to reinstall next-app?, please I'm new to Next js.
Here is my 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;
Whenever I put the appDir as false, I get the following error
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'
}
答案1
得分: 2
根据 https://nextjs.org/docs/messages/experimental-app-dir-config 中的文档:
如果您不想使用新的 app/ 目录功能,但已经有一个名为 app/ 的目录,请将该目录重命名为其他名称。
尝试重命名或删除 app/
目录,并从您的 next.config.js
中删除 appDir: true
。如果计划删除 app/
目录,请将页面文件移动到 src/pages
。
英文:
Based on the documentation in https://nextjs.org/docs/messages/experimental-app-dir-config
> If you do not want to use the new app/ directory features yet, but have a directory named app/, rename the directory to something else.
Try to rename or remove the app/
directory and remove the appDir: true
in your next.config.js
. If you planning to remove the app/
directory, move the page files into src/pages
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论