[Bug]: App Directory: Navigation between pages is always hard reload #2089

molniya0207 · 2023-05-05T16:21:24Z

Summary

When using App Directory (App Router) in Next.js (to clarify: the problem exists from the first version with app router to current version 13.4.1) every navigation using a link performs a hard reload, instead of expected behavior of refreshing only navigated part of the app (eg. inner page without layout).
Problem occurs on all Next.js versions with App Router and probably all Next.js Plugin versions (I tested this on 4.33.0, 4.30.1, appdir and current latest version).

I'm not the only one with this problem; this problem is already on Next.js 13 App Router Feedback discussion, but it looks like everyone forget that that discussion exists: #1724 (comment)

I reported this problem on Netlify Support forums first: https://answers.netlify.com/t/next-js-13-app-directory-hard-reload-on-navigation/89143, where I shared some network requests info (note that this info is from an old Next.js and plugin version):

When opening /, Next.js also makes requests to links on this page with header RSC: 1 and receives some data (it’s even cached for me). As I understand RSC files are used to make redirects without hard reloads or something.
When clicking on a link to /buy, it first makes the same request again, then makes request to /buy, but now without RSC: 1 so it receives HTML. Then requests are almost the same as on / but for /buy now.

On next js dev server requests go this way:
When opening /, no requests are made with RSC header, only if I hover over a link.
When clicking a link it makes request to /buy with RSC, then to page.js (http://localhost:3000/_next/static/chunks/app/buy/page.js) and that’s all (excluding TRPC request, but that is not related to navigation)

By the way, it also didn’t work on Vercel, but that was because I didn’t remove i18n from my next config. After that, there was no hard reloads on Vercel but on Netlify nothing changed.

Examples so you can test it for yourself:
Deployed on Vercel (working as intended): https://adt.vercel.app/
Deployed on Netlify (latest plugin version, performs hard reload on navigation): https://famous-fox-e34d2e.netlify.app/
The link to test with is "Link" text in top-right corner.

Steps to reproduce

Use the provided examples:
Deployed on Vercel (working as intended): https://adt.vercel.app/
Deployed on Netlify (latest plugin version, performs hard reload on navigation): https://famous-fox-e34d2e.netlify.app/
The link to test with is "Link" text in top-right corner.

OR

Create it for yourself:

Create any new App Router project (my configuration is TS+ESLint+Tailwind CSS+Import Alias+App Router)
(or clone my repo: https://github.com/molniya0207/adt)
Add a second page and create links between them
Deploy to Netlify
Click on the links: it will hard reload

A link to a reproduction repository

https://github.com/molniya0207/adt

Next Runtime version

4.36.0

Is your issue related to the `app` directory (beta)?

Yes, I am using the app directory

More information about your build

I am building using the CLI
I am building using file-based configuration (netlify.toml)

What OS are you using?

None

Your netlify.toml file

No response

Your public/_redirects file

No response

Your `next.config.js` file

`next.config.js`

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

Builds logs (or link to your logs)

Build logs

9:23:19 PM: build-image version: cd0a67ec27b8bcd87e2a257fe5ebcf1900a8021d (focal)
9:23:19 PM: buildbot version: f3871d4c438bbd4f48a8f44a50bec7489430735e
9:23:19 PM: Fetching cached dependencies
9:23:19 PM: Starting to download cache of 168.6MB
9:23:20 PM: Finished downloading cache in 1.474s
9:23:20 PM: Starting to extract cache
9:23:22 PM: Finished extracting cache in 1.64s
9:23:22 PM: Finished fetching cache in 3.163s
9:23:22 PM: Starting to prepare the repo for build
9:23:22 PM: Preparing Git Reference refs/heads/main
9:23:23 PM: Parsing package.json dependencies
9:23:25 PM: Starting to install dependencies
9:23:25 PM: Python version set to 3.8
9:23:25 PM: Attempting Ruby version 2.7.2, read from environment
9:23:25 PM: Using Ruby version 2.7.2
9:23:26 PM: Started restoring cached go cache
9:23:26 PM: Finished restoring cached go cache
9:23:26 PM: Installing Go version 1.19.5 (requested 1.19.5)
9:23:31 PM: go version go1.19.5 linux/amd64
9:23:32 PM: Using PHP version 8.0
9:23:32 PM: Started restoring cached Node.js version
9:23:33 PM: Finished restoring cached Node.js version
9:23:34 PM: v16.20.0 is already installed.
9:23:34 PM: Now using node v16.20.0 (npm v8.19.4)
9:23:34 PM: Enabling Node.js Corepack
9:23:34 PM: Started restoring cached build plugins
9:23:34 PM: Finished restoring cached build plugins
9:23:34 PM: Started restoring cached corepack dependencies
9:23:34 PM: Finished restoring cached corepack dependencies
9:23:35 PM: Found pnpm version (7.13.4) that doesn't match expected ()Usage Error: Invalid package manager specification in CLI arguments; expected a semver version, range, or tag
9:23:35 PM: $ corepack prepare [--activate] [--all] [--json] [-o,--output] ...
9:23:35 PM: No pnpm workspaces detected
9:23:35 PM: Started restoring cached node modules
9:23:35 PM: Finished restoring cached node modules
9:23:35 PM: Installing npm packages using pnpm version 7.13.4
9:23:35 PM:  WARN  Ignoring not compatible lockfile at /opt/build/repo/pnpm-lock.yaml
9:23:36 PM: Progress: resolved 1, reused 0, downloaded 0, added 0
9:23:37 PM: Progress: resolved 10, reused 0, downloaded 10, added 0
9:23:38 PM: Progress: resolved 79, reused 0, downloaded 65, added 0
9:23:39 PM: Progress: resolved 155, reused 0, downloaded 143, added 0
9:23:39 PM: Already up to date
9:23:40 PM: Progress: resolved 156, reused 0, downloaded 146, added 0, done
9:23:41 PM: Done in 5.7s
9:23:41 PM: npm packages installed using pnpm
9:23:41 PM: Install dependencies script success
9:23:41 PM: Starting build script
9:23:42 PM: Detected 1 framework(s)
9:23:42 PM: "next" at version "13.4.1"
9:23:42 PM: Section completed: initializing
9:23:44 PM: 
9:23:44 PM:   Netlify Build                                                 
9:23:44 PM: ────────────────────────────────────────────────────────────────
9:23:44 PM: 
9:23:44 PM: ❯ Version
9:23:44 PM:   @netlify/build 29.10.1
9:23:44 PM: 
9:23:44 PM: ❯ Flags
9:23:44 PM:   baseRelDir: true
9:23:44 PM:   buildId: 64551f54166a010008a97062
9:23:44 PM:   deployId: 64551f54166a010008a97064
9:23:44 PM: 
9:23:44 PM: ❯ Current directory
9:23:44 PM:   /opt/build/repo
9:23:44 PM: 
9:23:44 PM: ❯ Config file
9:23:44 PM:   No config file was defined: using default values.
9:23:44 PM: 
9:23:44 PM: ❯ Context
9:23:44 PM:   production
9:23:44 PM: 
9:23:44 PM: ❯ Using Next.js Runtime - v4.36.0
9:23:46 PM: 
9:23:46 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
9:23:46 PM: ────────────────────────────────────────────────────────────────
9:23:46 PM: 
9:23:46 PM: Next.js cache restored.
9:23:46 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
9:23:46 PM: 
9:23:46 PM: (@netlify/plugin-nextjs onPreBuild completed in 112ms)
9:23:46 PM: 
9:23:46 PM:   2. Build command from Netlify app                             
9:23:46 PM: ────────────────────────────────────────────────────────────────
9:23:46 PM: 
9:23:46 PM: $ npm run build
9:23:46 PM: > adt@0.1.0 build
9:23:46 PM: > next build
9:23:47 PM: - warn Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration
9:23:47 PM: - info Creating an optimized production build...
9:23:53 PM: - info Compiled successfully
9:23:53 PM: - info Linting and checking validity of types...
9:23:55 PM: - info Collecting page data...
9:23:56 PM: - info Generating static pages (0/5)
9:23:56 PM: - info Generating static pages (1/5)
9:23:56 PM: - info Generating static pages (2/5)
9:23:56 PM: - info Generating static pages (3/5)
9:23:56 PM: - info Generating static pages (5/5)
9:23:57 PM: - info Finalizing page optimization...
9:23:57 PM: Route (app)                                Size     First Load JS
9:23:57 PM: ┌ ○ /                                      188 B          86.8 kB
9:23:57 PM: ├ ○ /asil                                  188 B          86.8 kB
9:23:57 PM: └ ○ /favicon.ico                           0 B                0 B
9:23:57 PM: + First Load JS shared by all              76.8 kB
9:23:57 PM:   ├ chunks/275-d3fb3348b6ec9437.js         24.5 kB
9:23:57 PM:   ├ chunks/b51ee262-fcc8afbf20d0d3c1.js    50.5 kB
9:23:57 PM:   ├ chunks/main-app-9d077d48da18a0c2.js    217 B
9:23:57 PM:   └ chunks/webpack-1102598922600a22.js     1.64 kB
9:23:57 PM: Route (pages)                              Size     First Load JS
9:23:57 PM: ─ ○ /404                                   178 B          85.9 kB
9:23:57 PM: + First Load JS shared by all              85.8 kB
9:23:57 PM:   ├ chunks/main-26535efcf6c893d0.js        83.9 kB
9:23:57 PM:   ├ chunks/pages/_app-7eb8ec636160b3cb.js  192 B
9:23:57 PM:   └ chunks/webpack-1102598922600a22.js     1.64 kB
9:23:57 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
9:23:57 PM: 
9:23:57 PM: (build.command completed in 11.4s)
9:23:57 PM: 
9:23:57 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
9:23:57 PM: ────────────────────────────────────────────────────────────────
9:23:57 PM: 
9:23:57 PM: Patching /opt/build/repo/node_modules/.pnpm/next@13.4.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js
9:23:57 PM: Done
9:23:57 PM: Patching /opt/build/repo/node_modules/.pnpm/next@13.4.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next-server.js
9:23:57 PM: Done
9:23:57 PM: Moving static page files to serve from CDN...
9:23:57 PM: Moving /opt/build/repo/.next/server/app/asil.html to /opt/build/repo/.next/asil.html
9:23:57 PM: Moving /opt/build/repo/.next/server/app/asil.rsc to /opt/build/repo/.next/asil.rsc
9:23:57 PM: Moving /opt/build/repo/.next/server/app/index.html to /opt/build/repo/.next/index.html
9:23:57 PM: Moving /opt/build/repo/.next/server/app/index.rsc to /opt/build/repo/.next/index.rsc
9:23:57 PM: Moved 4 files
9:23:57 PM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
9:23:57 PM: Netlify configuration property "redirects" value changed to [
9:23:57 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
9:23:57 PM:   {
9:23:57 PM:     from: '/_next/image*',
9:23:57 PM:     query: { url: ':url', w: ':width', q: ':quality' },
9:23:57 PM:     to: '/_ipx/w_:width,q_:quality/:url',
9:23:57 PM:     status: 301
9:23:57 PM:   },
9:23:57 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
9:23:57 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
9:23:57 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
9:23:57 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
9:23:57 PM:   { from: '/trace', to: '/404.html', status: 404, force: true },
9:23:57 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
9:23:57 PM:   {
9:23:57 PM:     from: '/routes-manifest.json',
9:23:57 PM:     to: '/404.html',
9:23:57 PM:     status: 404,
9:23:57 PM:     force: true
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/build-manifest.json',
9:23:57 PM:     to: '/404.html',
9:23:57 PM:     status: 404,
9:23:57 PM:     force: true
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/prerender-manifest.json',
9:23:57 PM:     to: '/404.html',
9:23:57 PM:     status: 404,
9:23:57 PM:     force: true
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/react-loadable-manifest.json',
9:23:57 PM:     to: '/404.html',
9:23:57 PM:     status: 404,
9:23:57 PM:     force: true
9:23:57 PM:   },
9:23:57 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
9:23:57 PM:   {
9:23:57 PM:     from: '/api/*',
9:23:57 PM:     to: '/.netlify/functions/___netlify-handler',
9:23:57 PM:     status: 200
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/next.svg',
9:23:57 PM:     to: '/next.svg',
9:23:57 PM:     conditions: { Cookie: [Array] },
9:23:57 PM:     status: 200
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/vercel.svg',
9:23:57 PM:     to: '/vercel.svg',
9:23:57 PM:     conditions: { Cookie: [Array] },
9:23:57 PM:     status: 200
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/*',
9:23:57 PM:     to: '/.netlify/functions/___netlify-handler',
9:23:57 PM:     status: 200,
9:23:57 PM:     conditions: { Cookie: [Array] },
9:23:57 PM:     force: true
9:23:57 PM:   },
9:23:57 PM:   {
9:23:57 PM:     from: '/*',
9:23:57 PM:     to: '/.netlify/functions/___netlify-handler',
9:23:57 PM:     status: 200
9:23:57 PM:   }
9:23:57 PM: ].
9:23:57 PM: 
9:23:57 PM: (@netlify/plugin-nextjs onBuild completed in 64ms)
9:23:57 PM: 
9:23:57 PM:   4. Functions bundling                                         
9:23:57 PM: ────────────────────────────────────────────────────────────────
9:23:57 PM: 
9:23:57 PM: Packaging Functions from .netlify/functions-internal directory:
9:23:57 PM:  - ___netlify-handler/___netlify-handler.js
9:23:57 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
9:23:57 PM:  - _ipx/_ipx.js
9:23:57 PM: 
9:24:24 PM: 
9:24:24 PM: (Functions bundling completed in 26.4s)
9:24:24 PM: 
9:24:24 PM:   5. Edge Functions bundling                                    
9:24:24 PM: ────────────────────────────────────────────────────────────────
9:24:24 PM: 
9:24:24 PM: Packaging Edge Functions from .netlify/edge-functions directory:
9:24:24 PM:  - rsc-data
9:24:24 PM: 
9:24:24 PM: (Edge Functions bundling completed in 722ms)
9:24:24 PM: 
9:24:24 PM:   6. @netlify/plugin-nextjs (onPostBuild event)                 
9:24:24 PM: ────────────────────────────────────────────────────────────────
9:24:24 PM: 
9:24:25 PM: Next.js cache saved.
9:24:25 PM: 🧪 Thank you for testing "appDir" support on Netlify. For known issues and to give feedback, visit https://ntl.fyi/next-13-feedback
9:24:25 PM: 
9:24:25 PM: (@netlify/plugin-nextjs onPostBuild completed in 68ms)
9:24:25 PM: 
9:24:25 PM:   7. Deploy site                                                
9:24:25 PM: ────────────────────────────────────────────────────────────────
9:24:25 PM: 
9:24:25 PM: Starting to deploy site from '.next'
9:24:25 PM: Calculating files to upload
9:24:25 PM: 41 new files to upload
9:24:25 PM: 2 new functions to upload
9:24:34 PM: Section completed: deploying
9:24:34 PM: Site deploy was successfully initiated
9:24:34 PM: 
9:24:34 PM: (Deploy site completed in 9.3s)
9:24:34 PM: 
9:24:34 PM:   Netlify Build Complete                                        
9:24:34 PM: ────────────────────────────────────────────────────────────────
9:24:34 PM: 
9:24:34 PM: (Netlify Build completed in 50.3s)
9:24:35 PM: Caching artifacts
9:24:35 PM: Started saving node modules
9:24:35 PM: Starting post processing
9:24:35 PM: Finished saving node modules
9:24:35 PM: Started saving build plugins
9:24:35 PM: Finished saving build plugins
9:24:35 PM: Post processing - HTML
9:24:35 PM: Started saving corepack cache
9:24:35 PM: Finished saving corepack cache
9:24:35 PM: Started saving pip cache
9:24:35 PM: Finished saving pip cache
9:24:35 PM: Started saving emacs cask dependencies
9:24:35 PM: Finished saving emacs cask dependencies
9:24:35 PM: Started saving maven dependencies
9:24:35 PM: Finished saving maven dependencies
9:24:35 PM: Started saving boot dependencies
9:24:35 PM: Finished saving boot dependencies
9:24:35 PM: Post processing - header rules
9:24:35 PM: Started saving rust rustup cache
9:24:35 PM: Finished saving rust rustup cache
9:24:35 PM: Started saving go dependencies
9:24:35 PM: Finished saving go dependencies
9:24:36 PM: Post processing - redirect rules
9:24:35 PM: Build script success
9:24:35 PM: Section completed: building
9:24:36 PM: Post processing done
9:24:36 PM: Section completed: postprocessing
9:24:37 PM: Site is live ✨
9:24:41 PM: Uploading Cache of size 168.8MB
9:24:42 PM: Section completed: cleanup
9:24:42 PM: Finished processing build request in 1m23.367s

Function logs

Nothing useful:

May 5, 10:19:14 PM: 4880eaf8 INFO   [GET] /favicon.ico (SSR)
May 5, 10:19:14 PM: 4880eaf8 Duration: 9.93 ms	Memory Usage: 137 MB	
May 5, 10:19:15 PM: 366fac3e INFO   [GET] /favicon.ico (SSR)
May 5, 10:19:15 PM: 366fac3e Duration: 7.10 ms	Memory Usage: 137 MB	
May 5, 10:19:17 PM: f50b59dd INFO   [GET] /favicon.ico (SSR)
May 5, 10:19:17 PM: f50b59dd Duration: 10.64 ms	Memory Usage: 137 MB

.next JSON files

No response

The text was updated successfully, but these errors were encountered:

pieh · 2023-05-08T11:07:40Z

There seemed to be change somewhere between next@13.1.6 (this worked) and next@13.3.0 (stopped working) that we didn't address yet - https://github.com/netlify/next-runtime/pull/2056/files#r1177491204 (I think this test basically tries to assert behavior that you are describing with setting property on window and trying to check if it's still set after clicking few navigation links)

molniya0207 · 2023-05-10T04:39:36Z

Is there anything I can help with?

josehernandezv · 2023-05-12T22:12:45Z

This is happening to me in Next 13.4.2

tfsomrat · 2023-05-16T09:06:21Z

Same here, waiting for updates...

l-you · 2023-05-27T12:41:34Z

forceOptimisticNavigation helps to do a workaround for it. But seems like this option can disappear soon
vercel/next.js#47905

Edit: only in dev mode.

edarioq · 2023-05-28T13:14:23Z

I thought it was an issue with Styled Components and ended up rewriting a lot of components only to figure out that wasn't the issue. I'm deploying on Netlify, using Nextjs 13.4.4. Every route change reloads the page, except for child routes. Navigating between child routes doesn't do the hard refresh. This is annoying and so buggy, should still be in BETA.

edarioq · 2023-05-31T15:15:57Z

How to use forceOptimisticNavigation ?

l-you · 2023-05-31T17:23:40Z

@edarioq after deployment it turned out that forceOptimisticNavigation didn't work on production, only in development
In my case, the issue was caused by unicode characters in my query parameters, which is a bug in NextJS.
The current issue doesn't seem to be related to my problem.

If anyone has a similar problem, they can take a look at vercel/next.js#48728

timrae · 2023-06-02T21:46:17Z

I'm also experiencing the same issue. See here for a sample project. Switching to vercel for now as that solves the problem for me.

timrae · 2023-06-02T21:48:31Z

Note that on the issue I just linked someone suggested that it might possibly be related to this

danielcrt · 2023-06-06T13:49:25Z

There seemed to be change somewhere between next@13.1.6 (this worked) and next@13.3.0 (stopped working) that we didn't address yet - https://github.com/netlify/next-runtime/pull/2056/files#r1177491204 (I think this test basically tries to assert behavior that you are describing with setting property on window and trying to check if it's still set after clicking few navigation links)

Tested with

"next": "13.1.6",
"@netlify/plugin-nextjs": "^4.29.5-appdir.0",

The issue still exists. My usecases:

navigate from / to ?q triggers hard reload (full page load)
navigate from / to /random-page works
navigate from /random-page to / triggers hard reload (full page load)

The above happens when using router.push but also with Link component.

tutods · 2023-06-08T07:13:58Z

I have the same problem, all my Next Link made a full refresh on page.
Any solution?

kamalbennani · 2023-06-13T12:35:09Z

Hi @pieh @MarcL
I was just wondering if this issue is on the radar ?
This is blocking a lot of teams from delivering, Could you kindly allocate some time to identify the underlying cause and suggest a solution?
🙇

MarcL · 2023-06-14T13:39:11Z

Hey @kamalbennani.
Yes - that's something we're going to look at shortly and it's on our radar.
We've found some breaking issues with the changes in the latest Next version that have caused some regressions. We're working through them all and fixing them as soon as possible.

itsosmx · 2023-06-29T23:55:54Z

I have the same problem. Any solution?

asimashfaq · 2023-07-01T02:56:37Z

Same issue

edarioq · 2023-07-01T09:37:24Z

I have moved our sites to Vercel... they seem to not have a single issue, also their free tier is enough for our needs for now. So not only am I saving money, everything works as it should.

rahulnag · 2023-07-03T08:41:59Z

nextjs document is also very confusing.

in their documentation they have mentioned that if you have multiple root layouts then it will cause full reload.
but i have tried removing all the root layouts in the nested paths and deployed app to netlify, and the issue was still there.

then i again reverted the code and again added the layout files in all the routed and deployed the code in Vercel and everything was working absolutely fine and navigation between Links were not causing full reload of page.

What i found is same application is working fine in verce but not working in netlify. I think Netlify is not much compatible for NextJS deployment as of now.

same application in 2 different platform

netlify: www.rahulnag.in
vercel: https://next-portfolio-wheat-sigma.vercel.app/

ivanxgb · 2023-07-24T23:24:36Z

Hey, I was having same issue. The only difference was that I started my project using the T3 Stack.

Above @pieh says that the problem started on v.13.3.0, so my first solution (that might help you) was to downgrade Next.js to v.12.0.0 and deployed to Vercel for testing. Vercel throws and error saying that I needed to set experimental: {appDir: true} in next.config.msj because app directory wasn't stable until v.13.4.0, deployed again and it worked! No more hard reloads**

** There's another option, but I think is exclusive for apps created using T3.
In my next.config.mjs file was also this:

  /**
   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
   * out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },

So I removed i18n from the file and upgraded Next.js to last version (13.4.12) and, again, worked! No more hard reloads.

My next.config.msj:

/**
/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
};
export default config;

jonathonchilds · 2023-07-25T00:00:17Z

I have moved our sites to Vercel... they seem to not have a single issue, also their free tier is enough for our needs for now. So not only am I saving money, everything works as it should.

I might do the same tomorrow.

leifriksheim · 2023-07-26T09:48:57Z

Unfortunately we also had to move our website to Vercel because of this issue. I understand that it is actually Next.js (made by Vercel) patching React and creating lots of edge cases, and Vercel probably doesn't want to prioritize fixing an issue that makes people move over to their platform. Just wanted to let you know that more people experience this problem, and that it's unfortunate as our team would love to be able to continue using Netlify.

hariperisetla · 2024-02-13T11:15:00Z

@hariperisetla Try to upgrade next to v14.1 it may resolve reload issue, but there are other issues which you need to deal with, so you can give it a try.

I am using 14.1.0 in a site and it still has the issue. If I change the root layout to 'use client' then it resolves but I can't generate the metadata for it though.

ChiragChrg · 2024-02-13T16:01:45Z

9 months have passed, yet there has been no progress made on this issue. Given the lack of attention it has received, It seems that the Netlify development team may not be prioritizing this matter at all.

szhu95 · 2024-02-14T02:14:49Z

I am using next: 14.1.0 and @netlify/plugin-nextjs: "^4.41.3" and also running into this issue, any workarounds or should i downgrade both versions?

abhi-ideal · 2024-02-14T15:05:03Z

I am also facing the same issue with Firebase hosting, We are using the Next: 14.1.0 version. Our static pages reload each time, but dynamic routes work fine.

debashish4 · 2024-02-16T16:21:06Z

really strange. netlify hasn't fixed this issue even after so many complaints.

da-kicks-87 · 2024-02-17T15:35:33Z

I am have issue with this as well. I am on Next.js 14 and I have a website theme selector option using React useContext. On my local dev and environment it keeps the theme selection persistent when I navigate to a new page. When website is deployed on Netlify there is a hard load when navigating to new page and resets the state variables to default. It doesn't remember the theme selection.

I have tried Next.js Production mode on my local and it works as it should. It if definitely a Netlify problem. Does this mean apps where we need to keep state across pages are not compatible? What should we do?

h0lme3 · 2024-02-19T01:06:57Z

Hope it would be fixed soon

kumar0 · 2024-03-02T13:27:39Z

I am have issue with this as well. I am on Next.js 14 and I have a website theme selector option using React useContext. On my local dev and environment it keeps the theme selection persistent when I navigate to a new page. When website is deployed on Netlify there is a hard load when navigating to new page and resets the state variables to default. It doesn't remember the theme selection.

I have tried Next.js Production mode on my local and it works as it should. It if definitely a Netlify problem. Does this mean apps where we need to keep state across pages are not compatible? What should we do?

Its not netlify issue i deployed in fargate it doesn't work where as in local prod mode and vercel it works

kelenakamura · 2024-03-02T19:40:43Z

has anyone had the chance to try it with the newer 5.0.0 beta version of plugin-nextjs.

trevorh2007 · 2024-03-04T07:17:48Z

also happens on github pages deploy using app router, any next/link clicked will work fine going FROM "/", but going TO "/" hard refreshes and you lost any context provider context

kumar0 · 2024-03-06T18:18:25Z

Stll waiting to know the work around

EmkeDevani · 2024-03-07T15:55:44Z

I'm using shallow routing to update the searchParams. When i update the searchparams the page reloads on Netlify. On the local build it doesn't reload the page. Could this be the same issue?

vickywane · 2024-03-14T10:50:06Z

UPDATE:

Netlify released the Next.js Runtime v5 earlier this week which you can opt-in through the Deploys page of your Netlify app or manually.

Updating to the Next.js V5 runtime resolved the shallow routing problem I was having and reported in this long thread.

Cc: @MarcL

debashish4 · 2024-03-14T17:32:23Z

yippee... finally working.. this issue resolved after upgrading to next js runtime 5. Just two steps. click on on Opt in and deploy the site again.

withden · 2024-03-18T12:21:09Z

Yes, it's working. Netlify has recently updated a runtime

Thanks to Netlify ✨

Hexi1997 · 2024-03-20T12:23:44Z

still... nextjs sucks

brendengerber · 2024-04-04T15:15:58Z

Spent hours trying to figure this out until I stumbled on this thread. Yes nextjs kinda sucks, but even so, it still took Netlify over 8 months to fix. which I think is completely unacceptable for functionality that's so absolutely basic. Guess it's time to start exploring other hosting for clients' sites.

pablojsx · 2024-04-06T18:33:21Z

having this problem in vercel right now, nextjs updated

henriques4nti4go · 2024-04-17T14:03:04Z

same problem, when I navigate between pages, the page is always reloaded

kevinrss01 · 2024-04-17T14:08:00Z

I solved the issue for me by using router.push() instead of Link tag...

da-kicks-87 · 2024-04-21T14:48:59Z

Well regardless if this issue was fix or not, I have already move my project Vercel, where everything works the way it should.

lahiruramesh · 2024-05-20T00:05:44Z

I solved this issue by using Link tag

MarcL · 2024-05-20T13:22:48Z

Hey all.

The team at Netlify have now released the new v5 Next.js runtime which has support for both pages and app router, on-demand and time-based revalidation, automatic fine-grained cache control, improved monorepo support, and automatic image optimization using Netlify's image CDN. It should also fix this navigation issue.

You can find the documentation and additional information on the v5 runtime here: Next.js on Netlify

The v4 runtime is now in the maintenance support phase, with no new features being added. Occasional bug fixes and security patches will be applied when needed.

Thanks!

77pintu · 2024-09-22T02:21:18Z

While navigating to another page using a link, the page is reloading in Next.js 13 and Next.js 14. Please let me know how to resolve this.

kevinrss01 · 2024-09-22T08:46:54Z

While navigating to another page using a link, the page is reloading in Next.js 13 and Next.js 14. Please let me know how to resolve this.

Use router.push()

molniya0207 added the type: bug code to address defects in shipped code label May 5, 2023

pieh added the status: confirmed A maintainer has reproduced the issue label May 8, 2023

LekoArts mentioned this issue May 12, 2023

[Bug]: Runtime not working with version 13.3.0 and latest versions 13.3.3 of NextJs (state and rendering issue) #2079

Closed

3 tasks

MarcL added the Ecosystem: Frameworks label May 16, 2023

bentrynning mentioned this issue Jun 14, 2023

chore: upgrade to next v13.4 #2080

Merged

clevinson mentioned this issue Jun 19, 2023

[NEXT-658] Nextjs 13 Link not scrolling to anchor element vercel/next.js#44295

Closed

1 task

bealecs mentioned this issue Jun 20, 2023

Dark/Light Toggle Theme State NOT Persistent Vets-Who-Code/js-web-path-bealecs#34

Closed

Lada496 mentioned this issue Jul 8, 2023

Deploy on Vercel instead of Netlify because of current deploy issue on Netlify van-squad/VanTechEventFinder#29

Closed

MarcL mentioned this issue Jul 19, 2023

[Bug]: ISR Working Locally But Not Working on Netify #2127

Closed

3 tasks

CalebMacdonaldBlack mentioned this issue Mar 10, 2024

"Intercepting routes" feature not working in production vercel/next.js#63076

Open

MarcL added v4 Issues related to the v4 Next.js runtime and removed Ecosystem: Frameworks labels Mar 13, 2024

kage1020 mentioned this issue Mar 16, 2024

[next] router.replace triggers page refresh on Netlify kage1020/CrossCalculator#12

Open

MarcL closed this as completed May 20, 2024

[Bug]: App Directory: Navigation between pages is always hard reload #2089

[Bug]: App Directory: Navigation between pages is always hard reload #2089

Comments

molniya0207 commented May 5, 2023 • edited Loading

Summary

Steps to reproduce

A link to a reproduction repository

Next Runtime version

Is your issue related to the app directory (beta)?

More information about your build

What OS are you using?

Your netlify.toml file

Your public/_redirects file

Your next.config.js file

Builds logs (or link to your logs)

Function logs

.next JSON files

pieh commented May 8, 2023

molniya0207 commented May 10, 2023

josehernandezv commented May 12, 2023

tfsomrat commented May 16, 2023

l-you commented May 27, 2023 • edited Loading

edarioq commented May 28, 2023

edarioq commented May 31, 2023

l-you commented May 31, 2023

timrae commented Jun 2, 2023 • edited Loading

timrae commented Jun 2, 2023

danielcrt commented Jun 6, 2023 • edited Loading

tutods commented Jun 8, 2023

kamalbennani commented Jun 13, 2023

MarcL commented Jun 14, 2023

itsosmx commented Jun 29, 2023

asimashfaq commented Jul 1, 2023

edarioq commented Jul 1, 2023

rahulnag commented Jul 3, 2023

same application in 2 different platform

ivanxgb commented Jul 24, 2023

jonathonchilds commented Jul 25, 2023 • edited Loading

leifriksheim commented Jul 26, 2023

hariperisetla commented Feb 13, 2024

ChiragChrg commented Feb 13, 2024

szhu95 commented Feb 14, 2024

abhi-ideal commented Feb 14, 2024

debashish4 commented Feb 16, 2024 • edited Loading

da-kicks-87 commented Feb 17, 2024 • edited Loading

h0lme3 commented Feb 19, 2024

kumar0 commented Mar 2, 2024

kelenakamura commented Mar 2, 2024

trevorh2007 commented Mar 4, 2024

kumar0 commented Mar 6, 2024

EmkeDevani commented Mar 7, 2024

vickywane commented Mar 14, 2024

debashish4 commented Mar 14, 2024 • edited Loading

withden commented Mar 18, 2024

Hexi1997 commented Mar 20, 2024

brendengerber commented Apr 4, 2024

pablojsx commented Apr 6, 2024

henriques4nti4go commented Apr 17, 2024

kevinrss01 commented Apr 17, 2024 • edited Loading

da-kicks-87 commented Apr 21, 2024

lahiruramesh commented May 20, 2024

MarcL commented May 20, 2024

77pintu commented Sep 22, 2024

kevinrss01 commented Sep 22, 2024

molniya0207 commented May 5, 2023 •

edited

Loading

Is your issue related to the `app` directory (beta)?

Your `next.config.js` file

l-you commented May 27, 2023 •

edited

Loading

timrae commented Jun 2, 2023 •

edited

Loading

danielcrt commented Jun 6, 2023 •

edited

Loading

jonathonchilds commented Jul 25, 2023 •

edited

Loading

debashish4 commented Feb 16, 2024 •

edited

Loading

da-kicks-87 commented Feb 17, 2024 •

edited

Loading

debashish4 commented Mar 14, 2024 •

edited

Loading

kevinrss01 commented Apr 17, 2024 •

edited

Loading