netlify/next-runtime

[Bug]: `next/link` hash links don't work and cause full page reload

bradlc opened this issue · 2 comments

bradlc commented

Summary

Using next/link to link to a target on the current page does not work and causes the page to reload, e.g.

import Link from 'next/link'

function App() {
  return (
    <div>
      <Link href="#example">Example</Link>
      <div id="example">
        {/* ... */}
      </div>
    </div>
  )
}

A link to a reproduction repository

https://github.com/bradlc/netlify-next-issue

Expected Result

Clicking on the nav links should trigger a smooth scroll down to the corresponding section. The same project deployed to Vercel shows the expected result: https://netlify-next-issue.vercel.app/

Actual Result

The page reloads and the hash is not appended to the URL: https://main--warm-banoffee-17e92b.netlify.app/

Steps to reproduce

  1. Click one of the nav links ("One", "Two", or "Three")

Next Runtime version

4.40.1

Is your issue related to the app directory?

  • 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 
11:53:26 AM: build-image version: 6cae66f783f2b7ff8e3a9cdbb5031761f0b47719 (focal)
11:53:26 AM: buildbot version: 6cae66f783f2b7ff8e3a9cdbb5031761f0b47719
11:53:26 AM: Fetching cached dependencies
11:53:26 AM: Failed to fetch cache, continuing with build
11:53:26 AM: Starting to prepare the repo for build
11:53:26 AM: No cached dependencies found. Cloning fresh repo
11:53:26 AM: git clone --filter=blob:none https://github.com/bradlc/netlify-next-issue
11:53:26 AM: Preparing Git Reference refs/heads/main
11:53:28 AM: Starting to install dependencies
11:53:28 AM: Python version set to 3.8
11:53:28 AM: Attempting Ruby version 2.7.2, read from environment
11:53:29 AM: Using Ruby version 2.7.2
11:53:29 AM: Started restoring cached go cache
11:53:29 AM: Finished restoring cached go cache
11:53:29 AM: go version go1.19.12 linux/amd64
11:53:30 AM: Using PHP version 8.0
11:53:31 AM: v18.17.1 is already installed.
11:53:31 AM: Now using node v18.17.1 (npm v9.6.7)
11:53:31 AM: Enabling Node.js Corepack
11:53:31 AM: Started restoring cached build plugins
11:53:31 AM: Finished restoring cached build plugins
11:53:31 AM: Started restoring cached corepack dependencies
11:53:31 AM: Finished restoring cached corepack dependencies
11:53:31 AM: No npm workspaces detected
11:53:31 AM: Started restoring cached node modules
11:53:31 AM: Finished restoring cached node modules
11:53:31 AM: Installing npm packages using npm version 9.6.7
11:53:38 AM: added 321 packages, and audited 322 packages in 6s
11:53:38 AM: 117 packages are looking for funding
11:53:38 AM:   run `npm fund` for details
11:53:38 AM: found 0 vulnerabilities
11:53:38 AM: npm packages installed
11:53:38 AM: Install dependencies script success
11:53:38 AM: Starting build script
11:53:39 AM: Detected 1 framework(s)
11:53:39 AM: next at version 13.4.19
11:53:39 AM: Section completed: initializing
11:53:40 AM: ​
11:53:40 AM: Netlify Build                                                 
11:53:40 AM: ────────────────────────────────────────────────────────────────
11:53:40 AM: ​
11:53:40 AM: ❯ Version
11:53:40 AM:   @netlify/build 29.20.6
11:53:40 AM: ​
11:53:40 AM: ❯ Flags
11:53:40 AM:   baseRelDir: true
11:53:40 AM:   buildId: 64e5e520ea83420259308d5b
11:53:40 AM:   deployId: 64e5e520ea83420259308d5d
11:53:40 AM: ​
11:53:40 AM: ❯ Current directory
11:53:40 AM:   /opt/build/repo
11:53:40 AM: ​
11:53:40 AM: ❯ Config file
11:53:40 AM:   No config file was defined: using default values.
11:53:40 AM: ​
11:53:40 AM: ❯ Context
11:53:40 AM:   production
11:53:40 AM: ​
11:53:40 AM: ❯ Installing plugins
11:53:40 AM:    - @netlify/plugin-nextjs@4.40.1
11:53:50 AM: ​
11:53:50 AM: ❯ Using Next.js Runtime - v4.40.1
11:53:51 AM: ​
11:53:51 AM: @netlify/plugin-nextjs (onPreBuild event)                     
11:53:51 AM: ────────────────────────────────────────────────────────────────
11:53:51 AM: ​
11:53:51 AM: No Next.js cache to restore.
11:53:51 AM: Netlify configuration property build.environment.NEXT_PRIVATE_TARGET value changed.
11:53:51 AM: ​
11:53:51 AM: (@netlify/plugin-nextjs onPreBuild completed in 14ms)
11:53:51 AM: ​
11:53:51 AM: Build command from Netlify app                                
11:53:51 AM: ────────────────────────────────────────────────────────────────
11:53:51 AM: ​
11:53:51 AM: $ npm run build
11:53:51 AM: > netlify-next-issue@0.1.0 build
11:53:51 AM: > next build
11:53:51 AM: - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
11:53:51 AM: - info Creating an optimized production build...
11:53:58 AM: - info Compiled successfully
11:53:58 AM: - info Linting and checking validity of types...
11:53:59 AM: - info Collecting page data...
11:54:06 AM: - info Generating static pages (0/4)
11:54:06 AM: - info Generating static pages (1/4)
11:54:06 AM: - info Generating static pages (2/4)
11:54:06 AM: - info Generating static pages (3/4)
11:54:06 AM: - info Generating static pages (4/4)
11:54:08 AM: - info Finalizing page optimization...
11:54:08 AM: Route (app)                                Size     First Load JS
11:54:08 AM: ┌ ○ /                                      10.3 kB        88.8 kB
11:54:08 AM: └ ○ /favicon.ico                           0 B                0 B
11:54:08 AM: + First Load JS shared by all              78.4 kB
11:54:08 AM:   ├ chunks/596-c294a7d39d9fe754.js         26.1 kB
11:54:08 AM:   ├ chunks/fd9d1056-a99b58d3cc150217.js    50.5 kB
11:54:08 AM:   ├ chunks/main-app-4194e38343a84834.js    219 B
11:54:08 AM:   └ chunks/webpack-cc3be81513004e4d.js     1.64 kB
11:54:08 AM: Route (pages)                              Size     First Load JS
11:54:08 AM: ─ ○ /404                                   182 B          76.4 kB
11:54:08 AM: + First Load JS shared by all              76.3 kB
11:54:08 AM:   ├ chunks/framework-8883d1e9be70c3da.js   45.1 kB
11:54:08 AM:   ├ chunks/main-6faadd80e6ce24f9.js        29.4 kB
11:54:08 AM:   ├ chunks/pages/_app-52924524f99094ab.js  195 B
11:54:08 AM:   └ chunks/webpack-cc3be81513004e4d.js     1.64 kB
11:54:08 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
11:54:08 AM: ​
11:54:08 AM: (build.command completed in 16.8s)
11:54:08 AM: ​
11:54:08 AM: @netlify/plugin-nextjs (onBuild event)                        
11:54:08 AM: ────────────────────────────────────────────────────────────────
11:54:08 AM: ​
11:54:08 AM: Moving static page files to serve from CDN...
11:54:08 AM: Moved 4 files
11:54:08 AM: You are not using Netlify Edge Functions for image format detection. Set env var NEXT_FORCE_EDGE_IMAGES=true to enable.
11:54:08 AM: Netlify configuration property redirects value changed to [
11:54:08 AM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
11:54:08 AM:   {
11:54:08 AM:     from: '/_next/image*',
11:54:08 AM:     query: { url: ':url', w: ':width', q: ':quality' },
11:54:08 AM:     to: '/_ipx/w_:width,q_:quality/:url',
11:54:08 AM:     status: 301
11:54:08 AM:   },
11:54:08 AM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
11:54:08 AM:   {
11:54:08 AM:     from: '/api/*',
11:54:08 AM:     to: '/.netlify/functions/___netlify-handler',
11:54:08 AM:     status: 200
11:54:08 AM:   },
11:54:08 AM:   {
11:54:08 AM:     from: '/*',
11:54:08 AM:     to: '/.netlify/functions/___netlify-handler',
11:54:08 AM:     status: 200,
11:54:08 AM:     conditions: { Cookie: [Array] },
11:54:08 AM:     force: true
11:54:08 AM:   },
11:54:08 AM:   {
11:54:08 AM:     from: '/*',
11:54:08 AM:     to: '/.netlify/functions/___netlify-handler',
11:54:08 AM:     status: 200
11:54:08 AM:   }
11:54:08 AM: ].
11:54:08 AM: ​
11:54:08 AM: (@netlify/plugin-nextjs onBuild completed in 71ms)
11:54:08 AM: ​
11:54:08 AM: Functions bundling                                            
11:54:08 AM: ────────────────────────────────────────────────────────────────
11:54:08 AM: ​
11:54:08 AM: Packaging Functions from .netlify/functions-internal directory:
11:54:08 AM:  - ___netlify-handler/___netlify-handler.js
11:54:08 AM:  - ___netlify-odb-handler/___netlify-odb-handler.js
11:54:08 AM:  - _ipx/_ipx.js
11:54:08 AM: ​
11:54:21 AM: ​
11:54:21 AM: (Functions bundling completed in 13.6s)
11:54:21 AM: ​
11:54:21 AM: Edge Functions bundling                                       
11:54:21 AM: ────────────────────────────────────────────────────────────────
11:54:21 AM: ​
11:54:21 AM: Packaging Edge Functions from .netlify/edge-functions directory:
11:54:21 AM:  - rsc-data
11:54:24 AM: ​
11:54:24 AM: (Edge Functions bundling completed in 2.5s)
11:54:24 AM: ​
11:54:24 AM: @netlify/plugin-nextjs (onPostBuild event)                    
11:54:24 AM: ────────────────────────────────────────────────────────────────
11:54:24 AM: ​
11:54:24 AM: Next.js cache saved.
11:54:24 AM: 🧪 Thank you for testing appDir support on Netlify. For known issues and to give feedback, visit https://ntl.fyi/next-13-feedback
11:54:24 AM: ​
11:54:24 AM: (@netlify/plugin-nextjs onPostBuild completed in 57ms)
11:54:24 AM: ​
11:54:24 AM: Deploy site                                                   
11:54:24 AM: ────────────────────────────────────────────────────────────────
11:54:24 AM: ​
11:54:24 AM: Starting to deploy site from '.next'
11:54:24 AM: Calculating files to upload
11:54:24 AM: 9 new files to upload
11:54:24 AM: 3 new functions to upload
11:54:32 AM: Starting post processing
11:54:32 AM: Skipping HTML post processing
11:54:32 AM: Post processing - header rules
11:54:32 AM: Post processing - redirect rules
11:54:33 AM: Post processing done
11:54:33 AM: Section completed: postprocessing
11:54:32 AM: Section completed: deploying
11:54:32 AM: Site deploy was successfully initiated
11:54:32 AM: ​
11:54:32 AM: (Deploy site completed in 7.8s)
11:54:34 AM: Site is live ✨
11:54:32 AM: ​
11:54:32 AM: Netlify Build Complete                                        
11:54:32 AM: ────────────────────────────────────────────────────────────────
11:54:32 AM: ​
11:54:32 AM: (Netlify Build completed in 51.8s)
11:54:33 AM: Caching artifacts
11:54:33 AM: Started saving node modules
11:54:33 AM: Finished saving node modules
11:54:33 AM: Started saving build plugins
11:54:33 AM: Finished saving build plugins
11:54:33 AM: Started saving corepack cache
11:54:33 AM: Finished saving corepack cache
11:54:33 AM: Started saving pip cache
11:54:33 AM: Finished saving pip cache
11:54:33 AM: Started saving emacs cask dependencies
11:54:33 AM: Finished saving emacs cask dependencies
11:54:33 AM: Started saving maven dependencies
11:54:33 AM: Finished saving maven dependencies
11:54:33 AM: Started saving boot dependencies
11:54:33 AM: Finished saving boot dependencies
11:54:33 AM: Started saving rust rustup cache
11:54:33 AM: Finished saving rust rustup cache
11:54:33 AM: Started saving go dependencies
11:54:33 AM: Finished saving go dependencies
11:54:33 AM: Build script success
11:54:33 AM: Section completed: building
11:54:34 AM: Uploading Cache of size 175.0MB
11:54:36 AM: Section completed: cleanup
11:54:36 AM: Finished processing build request in 1m10.338s

Function logs

No response

.next JSON files

No response

MarcL commented

Hey @bradlc - I think this is the same issue as this: #2089
We're looking at various fixes at the moment that should encompass this too.

See: #2089 (comment)

serhalp commented

Hi @bradlc

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, and automatic image optimization using Netlify's image CDN.

You can find the documentation and additional information on the new 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!

  • ❤️1
  • 🚀1