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

huangapple go评论68阅读模式
英文:

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(&#39;next&#39;).NextConfig} */
const path = require(&quot;path&quot;);

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

module.exports = nextConfig;

Whenever I put the appDir as false, I get the following error

Error: &gt; 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.&lt;anonymous&gt; (C:\Users\Favour\OneDrive\Documents\Code School\WebDevelopment\Projects\ecommerce\frontend\node_modules\next\dist\server\lib\render-server.js:92:17) {
  type: &#39;Error&#39;
}

答案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.

huangapple
  • 本文由 发表于 2023年4月19日 23:47:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76056491.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定