search

netlify / next-runtime

The Next.js Runtime allows Next.js to run on Netlify with zero configuration
https://www.npmjs.com/package/@netlify/plugin-nextjs
642 stars 85 forks source link

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

Closed molniya0207 closed 4 months ago

molniya0207 commented 1 year ago

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:

  1. 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)
  2. Add a second page and create links between them
  3. Deploy to Netlify
  4. 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)?

More information about your build

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

pieh commented 1 year ago

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 commented 1 year ago

Is there anything I can help with?

josehernandezv commented 1 year ago

This is happening to me in Next 13.4.2

tfsomrat commented 1 year ago

Same here, waiting for updates...

l-you commented 1 year ago

forceOptimisticNavigation helps to do a workaround for it. But seems like this option can disappear soon https://github.com/vercel/next.js/pull/47905

Edit: only in dev mode.

edarioq commented 1 year ago

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 commented 1 year ago

How to use forceOptimisticNavigation ?

l-you commented 1 year ago

@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 https://github.com/vercel/next.js/issues/48728

timrae commented 1 year ago

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 commented 1 year ago

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

danielcrt commented 1 year ago

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:

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

tutods commented 1 year ago

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

kamalbennani commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I have the same problem. Any solution?

asimashfaq commented 1 year ago

Same issue

edarioq commented 1 year ago

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 commented 1 year ago

nextjs document is also very confusing. image

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

ab70 commented 1 year ago

Same issue, but got no solution till now..

RajendraAVerma commented 1 year ago

Does anyone know what to do. I am also getting the same problem. ("next": "13.4.12")

angelyaaaaa commented 1 year ago

try adjust the version of @netlify/plugin-nextjs to ^4.29.5-appdir.0, it works on my site.

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

source from Deploy Next.js 13 on Netlify Today

JW709 commented 1 year ago

We are experiencing the same issue in production - hosting on firebase. The issue does not occur locally but in production navigating between routes causes a hard reload using both Link and router.push() actions. This causes global state to be reset for the entire application (stored in context). This also caused severe performance issues resulting in pages taking +10s to load. There is also an issue with cookies not being set that we didn't have a lot of time to dig into. We had to revert to 13.1 and move everything back to /pages directory.

VVIERV00 commented 1 year ago

We are experiencing the same issue in production - hosting on firebase. The issue does not occur locally but in production navigating between routes causes a hard reload using both Link and router.push() actions. This causes global state to be reset for the entire application (stored in context). This also caused severe performance issues resulting in pages taking +10s to load. There is also an issue with cookies not being set that we didn't have a lot of time to dig into. We had to revert to 13.1 and move everything back to /pages directory.

Hello! I've encountered the same issue. Could you please add a 'me too' to highlight its significance to the Firebase team? Here's the link: https://github.com/firebase/firebase-tools/issues/6141. Thank you! Maybe together we can solve it. I will think of moving to pages dir if it works for you

tuhoangwkm commented 1 year ago

try adjust the version of @netlify/plugin-nextjs to ^4.29.5-appdir.0, it works on my site.

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

source from Deploy Next.js 13 on Netlify Today

It works for me. many thanks

bentrynning commented 1 year ago

Any status on this issue, been here for some time now. Also looks like alot of people are having the same issue. Is there anything that the community could work together on or is the amount of NextJs sites deployed on Netlify pretty small ? @MarcL ? 🙏

MarcL commented 1 year ago

Hey @bentrynning.

We really appreciate everyone's frustrations with this not working and we always appreciate community PRs if you've got fixes. We've had a lot of bugs to fix and we're a very small team so haven't managed to prioritise everything, including fixing this.

However, we're in the middle of some work which we're hoping will fix a lot of the Next.js problems. It's a combination of changes to the runtime to simplify it, and some platform changes which allow us to make this happen.

77pintu commented 1 year ago

Hey I am also facing same issue still not yet get any solution

Der-Dominic commented 1 year ago

Hey, i'm experiencing the same Problem on a weird old Jetty Server with "static export". Maybe it's the same reason - maybe not. I just wanna leave my investigation/solution here as a hint/idea.

In my case the Content-Type returned by the Server was missing (and cannot be added/configured server side). It must either match the const "RSC_CONTENT_TYPE_HEADER" (text/x-component) or on static export "text/plain". See the following links:

For us the (dirty) but working solution is to intercept the fetch and add "Content-Type": "text/plain" if it is missing on .txt files. Maybe this helps.

Maybe it helps...?

Loque18 commented 1 year ago

+1 having the same issue

AkihiroTakamura commented 1 year ago

+1 The same hard reload is occurring in amplify hosting as well

VVIERV00 commented 1 year ago

Would deploying the Next.js app as a container serve as an effective workaround for overcoming the existing bug in the purely serverless architecture?

EvGreen commented 1 year ago

While Vercel does it better, I just noticed that on Vercel, when using app routing and having structure of let's say /blog/[slug] the links to said page would hard reload when the slug has hyphen (!) in it, it works fine when the slug is a single word only. Super weird but I believe it's related to this netlify problem.

On local build and dev everything works just fine.

dattu-ca commented 1 year ago

try adjust the version of @netlify/plugin-nextjs to ^4.29.5-appdir.0, it works on my site.

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

source from Deploy Next.js 13 on Netlify Today

@angelyaaaaa This worked. Thank you. 🙏

BrahimiMehdi commented 1 year ago

i'm having the same problem but with the pages directory , still next-js version 13+

BrahimiMehdi commented 1 year ago

try adjust the version of @netlify/plugin-nextjs to ^4.29.5-appdir.0, it works on my site.

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

source from Deploy Next.js 13 on Netlify Today

@angelyaaaaa This worked. Thank you. 🙏

Seems like this fixed it

kelenakamura commented 1 year ago

For those that have gotten it to work is it with the app directory or pages?

for those that haven't gotten it to work and still experience hard refreshes, have you noticed on safari that the back button doesn't work properly (it jumps back to current page)?

BrahimiMehdi commented 1 year ago

Actually mine only worked for a little then it broke again , im using next-js 13.4.0 and the pages directory, it seems that this only happens on SSR pages which causes a lot of breaking

valmir-haxholli commented 1 year ago

We are using amplify and next 13.4.8, this issue is only happening on production, locally we are unable to reproduce. Did anyone found a fix for this ?

jansengunderson commented 1 year ago

We're experiencing this same issue on Vercel as well, but only with dynamic nested routes such as /stay/[category]/[uid].

Like @EvGreen, local dev and build work fine. Removing hyphens did not change anything.

IamDieuKhanh2001 commented 1 year ago

Same problem in next 13.4.12, in dev mode and production mode localhost it's fine, in netlify deploy hot reload overtime i try to switch page, Im using Link from import next/link, maybe this one is a bug from nextjs

osnoser1 commented 1 year ago

try adjust the version of @netlify/plugin-nextjs to ^4.29.5-appdir.0, it works on my site.

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

source from Deploy Next.js 13 on Netlify Today

It worked for me too!

image
marnauortega commented 1 year ago

Do we have any news on the progress on this issue? It seems that there are several interrelated issues: Links hard-reloading, dynamic routes causing 500, and ISR not working. @MarcL you mentioned that some future changes to the runtime might fix a lot of these issues. Do you have an approximate timeline? Thanks a lot

alfredosalzillo commented 1 year ago

I'm experiencing this problem too in production and in development. Using next:13.4.19

alfredosalzillo commented 1 year ago

I solved the problem removing the chrome extension Mokku

DadaSantana commented 1 year ago

I am also facing the same problem. My application runs locally and in the development environment without any problems, but when I host it on Firebase, using the firebase deploy command, the Link component forcefully reloads the page.

Waiting for the problem to be resolved!

VVIERV00 commented 1 year ago

I am also facing the same problem. My application runs locally and in the development environment without any problems, but when I host it on Firebase, using the firebase deploy command, the Link component forcefully reloads the page.

Waiting for the problem to be resolved!

Check out this issue here and add any info so that they know this is affecting many people

ahmed0saber commented 1 year ago

I'm facing the same issue locally.