I've been working on a real-life project and decided to test out the new App directory feature that comes with Next.js version 13. However, I encountered some issues such as images and fonts not loading properly. Now, I'm looking to opt out of the experimental app directory without having to reinstall next-app. As a newbie to Next.js, I could use some guidance.
Below 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;
Every time I set the appDir to false, I encounter the following error:
Error: The `app` directory is experimental. To enable it, add `appDir: true` in your `next.config.js` configuration under `experimental`. Detailed information can be found at 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'
}