diff --git a/errors/experimental-app-dir-config.md b/errors/experimental-app-dir-config.md new file mode 100644 index 000000000000..99180710ddd7 --- /dev/null +++ b/errors/experimental-app-dir-config.md @@ -0,0 +1,27 @@ +# Experimental `appDir: true` + +#### Why This Error Occurred + +Your project contains a directory named `app/`. Since Next.js 13, this is a [reserved name](https://nextjs.org/blog/next-13#new-app-directory-beta). + +#### Possible Ways to Fix It + +To use the new app directory and its features, please add `appDir: true` to your configuration in `next.config.js` under `experimental`. + +```js +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + appDir: true, + }, +} + +module.exports = nextConfig +``` + +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. + +### Useful Links + +- [Next.js 13 App directory (Beta)](https://nextjs.org/blog/next-13#new-app-directory-beta) +- [App directory (Beta) documentation](https://beta.nextjs.org/docs) diff --git a/errors/manifest.json b/errors/manifest.json index 9be351338750..0d4f445731ca 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -761,6 +761,10 @@ { "title": "next-router-not-mounted", "path": "/errors/next-router-not-mounted.md" + }, + { + "title": "experimental-app-dir-config", + "path": "/errors/experimental-app-dir-config.md" } ] } diff --git a/packages/next/lib/find-pages-dir.ts b/packages/next/lib/find-pages-dir.ts index 2e0a89436901..b01a736b02a9 100644 --- a/packages/next/lib/find-pages-dir.ts +++ b/packages/next/lib/find-pages-dir.ts @@ -41,12 +41,12 @@ export function findPagesDir( if (!isAppDirEnabled) { if (appDir != null && pagesDir == null) { throw new Error( - '> The `app` dir is experimental. Please add `{experimental:{appDir: true}}` to your `next.config.js` to enable it' + '> 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' ) } if (appDir != null && pagesDir != null) { Log.warn( - 'The `app` dir is experimental. Please add `{experimental:{appDir: true}}` to your `next.config.js` to enable it' + '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' ) } if (pagesDir == null) { diff --git a/test/integration/appdir-missing-config/test/index.test.ts b/test/integration/appdir-missing-config/test/index.test.ts index c6d6cbefe6b6..0fde5f3c5e0d 100644 --- a/test/integration/appdir-missing-config/test/index.test.ts +++ b/test/integration/appdir-missing-config/test/index.test.ts @@ -14,7 +14,7 @@ const dir = path.join(__dirname, '..') const nextConfig = path.join(dir, 'next.config.js') const pagesIndex = path.join(dir, 'pages', 'index.js') const msg = - 'The `app` dir is experimental. Please add `{experimental:{appDir: true}}` to your `next.config.js` to enable it' + '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' function runTests(justPutIt: () => Promise) { it('should print error when missing config with app', async () => {