next-runtime icon indicating copy to clipboard operation
next-runtime copied to clipboard

Published 20 hours ago • verified publisher icon netlify

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

Open bradlc opened this issue 2 years ago • 1 comments

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?

  • [X] 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/[email protected]
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: > [email protected] 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

bradlc avatar Aug 23 '23 11:08 bradlc

Hey @bradlc - I think this is the same issue as this: https://github.com/netlify/next-runtime/issues/2089 We're looking at various fixes at the moment that should encompass this too.

See: https://github.com/netlify/next-runtime/issues/2089#issuecomment-1689892702

MarcL avatar Aug 23 '23 13:08 MarcL

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!

serhalp avatar Jun 04 '24 16:06 serhalp