Closed molniya0207 closed 4 months ago
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
has anyone had the chance to try it with the newer 5.0.0 beta version of plugin-nextjs.
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
Stll waiting to know the work around
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?
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
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.
Yes, it's working. Netlify has recently updated a runtime
Thanks to Netlify ✨
still... nextjs sucks
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.
having this problem in vercel right now, nextjs updated
same problem, when I navigate between pages, the page is always reloaded
I solved the issue for me by using router.push()
instead of Link
tag...
Well regardless if this issue was fix or not, I have already move my project Vercel, where everything works the way it should.
I solved this issue by using Link tag
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!
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.
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()
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: https://github.com/netlify/next-runtime/discussions/1724#discussioncomment-4606276
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:
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)?app
directoryMore information about your build
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`
```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
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