Using the Next 13 app directory on Netlify

[ascorbic]

If you update your site to Next 13, it will work on Netlify right away. All the stable features work out of the box with no changes required on your part when using the latest Netlify Next.js runtime. If you have manually installed the Netlify Next.js runtime in your package.json you will need to upgrade it, but for everyone else it will upgrade you automatically on your next deploy. However this does not include the new experimental app directory features. This is currently pre-release and should not be used for production.

While deploying app directory sites to Netlify is still experimental, it already supports many of the most interesting new features, including React Server Components and streaming HTML using the edge runtime. Pages that use the edge runtime are automatically deployed to Netlify Edge Functions.

This topic is for discussion of the use of app directory features, not general Next 13 topics. If you encounter a problem with an existing feature such as the pages directory or middleware, then open an issue rather than commenting here.

Update: you no longer need to install a special version of the runtime - the auto-installed version has appDir support enabled, though it is still experimental

Known issues

• You cannot currently use next.config.js to rewrite to a page that uses the edge runtime. The workaround is to use middleware to rewrite, which works correctly.
• dynamicParams: false is not supported
• Middleware data redirects should normalize destination #1800
• Edge runtime routes throw 500 error on trailing slash mismatch #1798
• Middleware should merge API route response cookies #1797
• Support "missing" middleware matcher #1796
• Support Next 13 request header mutation #1747

[rohanbhangui]

Seems to break with the latest version of nextjs 13.0.3. Getting an internal server error 500.

@ascorbic should we continue to use the next js runtime at 4.29.1 or should we lock to 4.28.4-appdir.0 for now?

[ascorbic]

I will be putting a new version of the appdir branch out tomorrow

[rohanbhangui]

@ascorbic thanks! Appreciate it :)

[rohanbhangui]

@ascorbic QQ is there anyway to have the runtime auto upgrade only to the appDir versions (I know one usually uses ^ to indicate versions higher than this)

[ascorbic]

If you explicitly set the dependency to "@netlify/plugin-nextjs": "appdir" then that should do it

[kamalbennani]

Hello guys 👋
So, I'm trying to deploy my NextJS 13 test app to Netlify (of course using appdir experimental feature) and weirdly enough all my routes navigation is turned into a hard page refresh 🤔 Is that expected?
Here is the preview of the app.
If you click on "Hello" text it should redirect you to the hello page using a hard page refresh.

[adshodgson]

Thanks, I am also having the same issue occur, excited for this patch!

[richardfwashington]

I too seem to be having the same issue

[sebastianhaiss]

I’m also seeing the same issue of complete page re-renders when navigating with the component. Looking forward for a fix as well! 🤓

[richardfwashington]

Just tried the app on Vercel, and seems to be fine. So it does at least appear to be related to Netlify in particular.

[bentrynning]

Any update to fix this behaviour? 😊

[ben519]

Not sure if this is a Netlify issue or a problem with my own code, but I keep getting a 500 Internal Server error when trying to fetch() data. I've described my issue in detail on StackOverflow.

[ascorbic]

Hi. I've replied on SO, but looking at your logs you're getting the error "Error: Page changed from static to dynamic at runtime /team/1, see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error"

[ben519]

This solved my issue. Thank you so much for the tips!

[ben519]

It seems that Next.js 13's loading UI doesn't work with Netlify (i.e. React Suspense component.)

My suspense component works fine locally with npm run dev and ntl dev, but it doesn't work when deployed to Netlify. One clear way to see this is by using the React developer tools Chrome extension.

ntl dev

https://loading--dundermifflininc.netlify.app/team

[ascorbic]

I'll take a look, thanks. Could be because we don't support streaming from the Node runtime?

[ben519]

Thanks! Sounds like a reasonable hypothesis, but a bit over my pay grade at this time.

[ClaytonTreder]

I have noticed this issue as well. Commenting to hopefully stay in the loop. Cheers!

[hk86]

Someone using appDir and trailingSlash with nextjs@13.1.6? Opening the url www.example.com/blog/article-a/ results in a redirect to www.example.com/blog/article-a

I've also deployed the same site to vercel and there trailingSlash is respected. I get no redirect.

Is this a known issue?

[sadhikari1r]

Issue: 500 Internal Server Error when deploying Next 13.4 with embed sanity studio on Netlify.

Adding an embed Sanity studio on Next 13.4. causes "500: Internal Server Error". The problem seems to be specifically related to the serverActions in Next.js 13.4, as the application works fine locally and on previous versions (e.g., 13.3) on the production.

Here is the log on Netlify Functions:

May 9, 12:02:35 PM: c0984344 ERROR Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /var/task/node_modules/react-dom/package.jsonMay 9, 12:02:35 PM: c0984344 ERROR at new NodeError (node:internal/errors:387:5)May 9, 12:02:35 PM: c0984344 ERROR at throwExportsNotFound (node:internal/modules/esm/resolve:365:9)May 9, 12:02:35 PM: c0984344 ERROR at packageExportsResolve (node:internal/modules/esm/resolve:649:3)May 9, 12:02:35 PM: c0984344 ERROR at resolveExports (node:internal/modules/cjs/loader:554:36)May 9, 12:02:35 PM: c0984344 ERROR at Function.Module._findPath (node:internal/modules/cjs/loader:594:31)May 9, 12:02:35 PM: c0984344 ERROR at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1012:27)May 9, 12:02:35 PM: c0984344 ERROR at /var/task/node_modules/next/dist/server/require-hook.js:180:36May 9, 12:02:35 PM: c0984344 ERROR at Function.Module._load (node:internal/modules/cjs/loader:871:27)May 9, 12:02:35 PM: c0984344 ERROR at Module.require (node:internal/modules/cjs/loader:1098:19)May 9, 12:02:35 PM: c0984344 ERROR at require (node:internal/modules/cjs/helpers:108:18) {May 9, 12:02:35 PM: c0984344 ERROR code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'May 9, 12:02:35 PM: c0984344 ERROR }

As a temporary workaround, setting the environment variable "__NEXT_PRIVATE_PREBUNDLED_REACT=next" resolved the issue for others. However, Netlify does not allow this particular environment variable to be set due to the prefix of (_).

During investigation, I came across a discussion thread in the Netlify Support Forums that addresses a similar error: Netlify Support Forums Thread.

Additionally, I noticed that there is a pull request in the Next.js GitHub repository that appears to address similar issue specifically for custom servers. It seems to have been fixed and merged on v13.4.0 but many others as well as I'm still getting the error. This might just be an issue with Next itself. Just wanted to point it for someone from Netlify to look into. Next.js PR.

[nickytonline]

@sadhikari1r, we're currently upgrading to 13.4 in the Next.js runtime. You can follow along here, #2080

[nickytonline]

Everything was merged and is currently rolling out. It'll be available to everyone by the end of the week. See https://github.com/netlify/next-runtime/releases/tag/plugin-nextjs-v4.38.0

[j-hit]

How can I explicitly define that Netlify should use v4.38.0 next.js runtime?

[morgnism]

The latest runtime still doesn't resolve this issue. I have an app running on 13.4 and still get this error with group routes i.e. app/(studio)/admin/[[...index]]/page.tsx (current sanity studio path with catchall route). I assumed that there's no way to manually change Nextjs runtime in Netlify and that it's updated automatically to the latest version.

Is there something we're missing?

[morgnism]

@j-hit you should be able to via toml and nextjs plugin (ref the plugin readme). However, this should be automatically updated via Netlify UI.

---

Just found this related support article where this problem is still present and being worked on.

[yukilun]

Hi! I am trying to deploy a next 13 app using 'app' router to Netlify. I added a 'not-found.js' to the 'app' directory to create my custom 404 page so that it will be shown when user visit any invalid URL .

I tried to create a repo for testing with just the starter file (npx create-next-app@latest). Without 'not-found.js', the Next default 404 page would be shown when I went to an invalid URL (https://647825f32dfd7e319f25f51d--regal-pika-910873.netlify.app/unkown):

However, when I added the 'not-found.js' to 'app' directory and visited an invalid URL, the custom 404 page could not be shown. Instead, "Internal Server Error" was shown (https://647826e083bb9900089436a2--regal-pika-910873.netlify.app/unkown):

I have also tried to deploy a next app using 'page' router and added '404.js' to 'page' directory and it works well(https://amazing-quokka-cb8229.netlify.app/unknown):

Is there any solution if I would like creating my custom page with 'app' directory? Thank you.

[MichaelTae]

Is there any word on this? I'm having the same issue and I can't seem to figure it out.

[SupratikRulz]

same here, I am looking out for a solution to this issue

[j-hit]

When deploying a Next.js 13.4.4 app to Netlify I had some issues.

At first I thought the deployment worked but I got the Netlify 404 page when I went to the site's URL.

In Netlify the build was not executed, only the post-processing stage was executed.

For it to work I just had to add the following to a netlify.toml file in the root of the repo.

[build]
  publish = ".next"

For full context my .gitlab-ci.yml file looks like this.

stages:
  - build
  - deploy
build-app:
  stage: build
  image: node:16
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - .next/
netlify:
  stage: deploy
  image: node:16
  script:
    - npm install -g netlify-cli
    - netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --build --prod --dir=.next
  only:
    - main

[norberthnd]

Hi! Dynamic routes (generated from mdx files) do not work with netlify form actions.
If such routes are used in the form action field, it results in a timeout:

The form submit works if the same page is created (as a directory under the app).

[orinokai]

hi @norberthnd, we'd need to discuss a few more details to diagnose the problem here and it would be great if you could open a GitHub issue or get in touch at https://www.netlify.com/support/

[j-hit]

Hi there.

I just tested out some changes on a preview deployment and the serverless function seems to be crashing and I have no idea why.

Jun 21, 03:59:26 PM: 2023-06-21T13:59:26.108Z	undefined	ERROR	Uncaught Exception 	{"errorType":"Error","errorMessage":"Could not find Next.js server","stack":["Error: Could not find Next.js server","    at Object.<anonymous> (/var/task/apps/bikeworld/.netlify/functions-internal/___netlify-handler/___netlify-handler.js:2:9)","    at Module._compile (node:internal/modules/cjs/loader:1196:14)","    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)","    at Module.load (node:internal/modules/cjs/loader:1074:32)","    at Function.Module._load (node:internal/modules/cjs/loader:909:12)","    at Module.require (node:internal/modules/cjs/loader:1098:19)","    at require (node:internal/modules/cjs/helpers:108:18)","    at Object.<anonymous> (/var/task/___netlify-handler.js:1:18)","    at Module._compile (node:internal/modules/cjs/loader:1196:14)","    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)"]}

https://14-134258--bikeworldmvp.netlify.app/.netlify/functions/___netlify-handler

What more information do you need to help me figure out why this is happening?

[ben519]

If my memory serves me correctly, I encountered an error like this too, but my app worked fine locally. So, I tried deploying to Vercel and it worked.

[j-hit]

Yep, switching to Vercel also fixed this issue for us.

[mushfiqueyeasir]

instead of showing 404 its showing me this

[orinokai]

sorry you are running into this issue, @mushfiqueyeasir, we have a fix rolling out from Monday #2188

[maxizipitria-halo]

Was this fixed? I'm getting the same error but the message refers to react instead of react-dom.

[wrappixelTeam]

Same issue of page reloading with app routing

[DWboutin]

Got error 500 when refreshing a shop/[bundleId] page on this minimal reproduction repo: https://github.com/DWboutin/test-routing

[josip-fundl]

Any updates or solutions which do not include migrating to Vercel?

[suhayp-gamma]

Any solutions!!

[josip-fundl]

There is a very very very long discussion held on the Netlify forum. I'll just link the solution which worked for me: https://answers.netlify.com/t/server-edge-not-defined-error-on-nextjs-ssr-functions-cause-site-to-return-500-errors/91793/127

In a nutshell:

1. npm install next@13.4.9
2. npm install @netlify/plugin-nextjs@4.40.1
3. add the experimental appDir: true flag to next.config,js

module.exports = {
  experimental: {
    appDir: true,
  },
}

Let me know if this works for you 👏🤞

[suhayp-gamma]

Updated Next.js to last version 13.5.2, it is fixed.🚀

[floka94]

@suhayp-gamma what is fixed? I am using 13.5.2 and it is not working without installing any plugin.

[camxus]

Static Images wont load on Netlify when they load on Vercel properly

[suhayp-gamma]

Updated Next.js to last version 13.5.2, it is fixed.🚀

[floka94]

I am trying to deploy Next.js 13.5.2 App but still get the following:

I am using the app router and tried to deploy with GitLab integration. In the deploy logs in Netlify everything was "green" and complete.

[floka94]

@ascorbic could you fix it?

[Antonytm]

Does anybody know if dynamicParams still is not supported?

[FiveOFive]

Seems like it is not supported yet. Didn't work for me as of today.

I needed dynamicParams = false to return 404s for dynamic pages that are only SSG (no ISR). I was able to work around it by having my data fetching functions return null at runtime (as opposed to return the real data at build time for SSG) and the pages handle null and redirect to 404.

if (data === null) {
    redirect('/404.html');
  }

It's definitely not ideal. The ISR lambda function still gets invoked, but it gives the behavior I needed from dynamicParams