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

ahmed0saber commented 1 year ago

The issue has been solved locally by upgrading node from v16.13.2 to v18.18.0

WalrusSoup commented 1 year ago

Ran into this today. Pretty new to next so i honestly have no idea what's going on. I'm running 13.4.9 with just a single page, no special configs or anything.

ahmed0saber commented 1 year ago

Ran into this today. Pretty new to next so i honestly have no idea what's going on. I'm running 13.4.9 with just a single page, no special configs or anything.

Hello @WalrusSoup , try upgrading your node version, this worked with me.

ahmed0saber commented 1 year ago

Hello @MarcL , I think this issue can be solved by upgrading node to the latest version on netlify servers.

BrahimiMehdi commented 1 year ago

i solved the problem by reverting back to next 13.1.6 , where my website functioned normally and updating it seemed to break like mentioned before

charkour commented 12 months ago

This is also happening for Next v13.5.3.

Please let me know how I can help.

Tonic-Digital commented 12 months ago

@MarcL is there any update on this, this issue has been open since May is there a fix for Enterprise customers?

FritzAxel commented 11 months ago

Hello @MarcL , I think this issue can be solved by upgrading node to the latest version on netlify servers.

It does not work. Vercel is working properly.

ghost commented 11 months ago

I’m having the same issue deploying on AWS ECS and cloudfront. Weirdly I got the same issue also when running locally a prod build with an https proxy. So imagine I serve my app in https://app.myapp.io:3001 well then I’m getting this issue and also home page returns a 404 error. But if I access localhost:3000 there’s no issue.

adrimonasterios commented 11 months ago

For anyone with the same problem. I was able to fix my issue with this article. Basically the useSearchParams hook on static pages makes those pages to be deopted into client side rendering.

ghankerson commented 11 months ago

We were seeing this with our site behind Cloudfront CDN. Making sure these headers were getting passed through Cloudfront seems to have done the trick: 

vary: RSC,Next-Router-State-Tree,Next-Router-Prefetch
tomasfrancisco commented 10 months ago

Strangely enough, and based on all the comments here, I also see that in Vercel is working fine. But not in Netlify 😢

ghankerson commented 10 months ago

Strangely enough, and based on all the comments here, I also see that in Vercel is working fine. But not in Netlify 😢

I think that is not strange because Vercel sends the vay headers like this: vary: RSC,Next-Router-State-Tree,Next-Router-Prefetch and presumable Netlify does not. If you can get Netlify to send those headers I'm pretty sure it will work fine.

ChiragChrg commented 10 months ago

This issue still persists on the latest Next.js 14 (14.0.2). Any updates on this issue?

tomasfrancisco commented 10 months ago

I think that is not strange because Vercel sends the vay headers like this: vary: RSC,Next-Router-State-Tree,Next-Router-Prefetch and presumable Netlify does not. If you can get Netlify to send those headers I'm pretty sure it will work fine.

Unfortunately doesn't seem to solve the problem.

Header from Netlify: 

HTTP/2 200
accept-ranges: bytes
age: 1
cache-control: public,max-age=0,must-revalidate
content-type: text/html; charset=UTF-8
date: Tue, 14 Nov 2023 09:59:11 GMT
etag: "5768d7ee7aee79c71b0ac537160b2c51-ssl"
server: Netlify
strict-transport-security: max-age=31536000; includeSubDomains; preload
vary: RSC,Next-Router-State-Tree,Next-Router-Prefetch,Next-Url
x-nf-request-id: 01HF6MAH049RMFDQM4S7KP3MWA
x-robots-tag: noindex
content-length: 123293

Header from Vercel:

HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 334424
cache-control: public, max-age=0, must-revalidate
content-disposition: inline
content-type: text/html; charset=utf-8
date: Tue, 14 Nov 2023 09:54:15 GMT
etag: "2a40b0709213af66bf51ea92e2eed3af"
server: Vercel
strict-transport-security: max-age=63072000
vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url
x-matched-path: /
x-vercel-cache: HIT
x-vercel-id: fra1::tmc4h-1699955655101-a479758169f7
content-length: 123045

On Netlify still have issues with the hash links

muneebulhassanpak commented 10 months ago

Issue persists in Next 14.0.2 in my case. App works okay in development mode. Deloying on netlify, full page reloads start occuring.

onyicodes commented 10 months 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;

This fixed it for me

oscarsson444 commented 10 months ago

In my case the fix was updating Next to version 14. The downside was the introduction of a new bug relating to routing and the browsers back button

julia-script commented 10 months 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.

Hey @MarcL , it's been a few months, do you have any update on that?

I noticed this repository hasn't been very active

I tried to investigate this bug and at least for my use case, the main issue is that while rsc-data.ts function does rewrite the call to the filename.rsc version of it in the presence of the RSC header, the resulting call is directed to ___netlify-odb-handler, which in turn responds with the rendered html of the page, not the content of the .rsc file.

I also tried setting up netlify functions but the middleware always intercept my calls and responds with nextjs 404, (even setting redirects on my netlify.toml file were ignored, but I'm not super experienced with this so maybe I did something wrong)

I tried to run this repo to debug it but it was unclear to me the proper way to run it.

I was able to run jest but had issues running cypress, and from what I've seen, the RSC tests are cypress e2e tests

If you could provide some instructions on it I could try to debug it myself and maybe come up with a fix.

I'd also recommend putting an announcement on Netlify docs warning people next@>13 is not properly supported, as my colleagues and I, and I assume many other teams, have put many hours of work on the assumption that next was fully supported.

I understand you might be a small team and it looks pretty hard to keep up with Vercel's pace, but I mean, Netlify page does promise "Unrivaled support for Next.js with zero configuration"

irvanster commented 9 months ago

same here, waiting for updates... Next 13.5.4

qtum34 commented 9 months ago

same here

Samuelespc commented 9 months ago

Same here. After a couple of days of finding how to resolve it, I moved to Vercel and everything worked as expected.

user4302 commented 9 months ago

same here

{
  "name": "sitename",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.1",
    "clsx": "^2.0.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
chinhbcdev commented 9 months ago

same. is there any update fixed nextjs 14 netlìy

chinhbcdev commented 9 months ago

"next": "14.0.4",

vickywane commented 9 months ago

Using next@14.0.1 I can confirm that this issue still persists.

Has anyone found a workaround to it? -- it's breaking the UX of a product I'm working on as the entire app reloads when users are navigating within the app.

Christopotamus commented 8 months 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.

Hey @MarcL, is there an ETA on the runtime changes? I'm afraid to poke around and attempt a fix if there are major changes coming, and don't want to waste time if there is already a fix in the works.

kjonathan098 commented 8 months ago

Just came by this issue and im seing its been months if not a year since the first ticket. Just deployed on Vercel with no issues. Might suggest you do the same

imornar commented 8 months ago

Is there any updates with this? I'm still having issues with nextjs v 14.1.0. Seems like it only works in vercel while Netlify and AWS do full pages reload. Unfortunately, my company have all infrastructure on AWS and they are not willing to move anytime soon. Did anyone figure out how to fix this?

chinhbcdev commented 8 months ago

Vào CN, 21 thg 1, 2024 lúc 18:36 Ivan Mornar @.***> đã viết:

Is there any updates with this? I'm still having issues with nextjs v 14.1.0. Seems like it only works in vercel while Netlify and AWS do full pages reload. Unfortunately, my company have all infrastructure on AWS and they are not willing to move anytime soon. Did anyone figure out how to fix this?

— Reply to this email directly, view it on GitHub https://github.com/netlify/next-runtime/issues/2089#issuecomment-1902601227, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5NBL4YF2HAJUOP6JKGKPFDYPT4SLAVCNFSM6AAAAAAXXKKWSWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGYYDCMRSG4 . You are receiving this because you commented.Message ID: @.***>

Had the same situation as you and had to roll back the nextjs version to 13.1.6

NathanFrank285 commented 8 months ago

Also having this issue, are there any updates?

ignasku commented 7 months ago

Still having this issue, any updates?

kumar0 commented 7 months ago

I have deployed on Fargate and it reloads.. but when I run locally with build and run or run local container it doesnt have any problem.. wondering what could be the issue

Update...... Deployed on vercel it works.. Not sure what is the root cause when deployed to Fargate

jaypoojara12 commented 7 months ago

I am facing the issue with hard refresh the whole UI when application is deployed. I have a common layout for all the pages, Assume I have 3 tabs in headers, When i redirect to from /home to /about it causes hard refresh the page and render whole UI again. But same work fine in local, it does not hard refresh the whole UI. Any solution for this issue? Im using next 14.

mrnugget commented 7 months ago

I created a new sample application here, just to test this: https://github.com/mrnugget/testing-nextjs

It works on Vercel, it does not work on Netlify. On Netlify it does full page reloads, no matter what.

So is this certainly a Netlify issue?

arcadechan commented 7 months ago

Same issue on Next 14.0.3.

My use case is simple so my solution for now has been to forego using the next/link component altogether and use a standard a tag in the meantime.

mrnugget commented 7 months ago

My use case is simple so my solution for now has been to forego using the next/link component altogether and use a standard a tag in the meantime.

Don't you then still get the full page reloads?

arcadechan commented 7 months ago

Ah, sorry. To clarify my issue was with URLs with hash values not scrolling down to their respective content due to the hard reload. The page refresh is an acceptable side effect for now since it's a simple static site I'm running for a client.

itsosmx commented 7 months ago

so should we go back to Reactjs, rather than spend my life trying to fix something that should be one of the features of the whole framework

kelenakamura commented 7 months ago

nextjs is so coupled with vercel, thats really the only option it seems. likely not even a priority for netlify it seems. else gotta stick with pages directory for now. i think we've been waiting for 8 months to have this fixed.

hariperisetla commented 7 months ago

Any update or workaround on this? I tried to change the root layout with 'use client' and made the hard reload stop. But I am not sure how to use the Metadata as it is a server component.

jaypoojara12 commented 7 months ago

@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.

pacoccino commented 7 months ago

@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 do have this issue on Next 14.1.0

hariperisetla commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

da-kicks-87 commented 7 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?

h0lme3 commented 7 months ago

Hope it would be fixed soon