Questions tagged [next-link]
The next-link tag has no usage guidance.
78
questions
13
votes
4
answers
29k
views
UnhandledSchemeError: What is this node:buffer error and how do I solve it?
Pasted below is a node:buffer error that I've received when using a link to a local route in nextjs. Anyone know how to solve this?
I see: https://github.com/vercel/next.js/discussions/33982
thanks!
...
- 243
11
votes
6
answers
22k
views
Why Nextjs Link scroll to top not working, when I change route
I am using next/link, but when I change the route, scroll to top not working.
<Link href="/some-page" scroll={false}> Go</Link>
What I should do?
I try too much methods and I ...
- 191
9
votes
2
answers
23k
views
How to trigger hard refresh when redirecting to a different page in Next.js?
I have a <Link> to a certain page on my Next.js website. Upon clicking it, I want the webpage to hard reload after it redirects to the destination page (whether it reloads before or after the ...
- 115
5
votes
3
answers
17k
views
How to fix unexpected behavior of Next/Link when it is a child of a button?
I am experiencing some issues with next/link when I use it in my app.
I have a reusable component that renders a button. This component is used twice on the page with different urls each time.
When ...
- 481
4
votes
1
answer
2k
views
how to make clickable part of <tr> in next js?
I made clickable the specific part of with the next link and it works fine, but in console, it shows a warning
Warning: validateDOMNesting(...): <a> cannot appear as a child of <tr>.
...
- 397
4
votes
1
answer
1k
views
Should you use next/link (prefetched client side transitions) for pages with any dynamic content?
From: next/link
You can see that the <Link> component from next/link enables client-side transitions and link prefetching, which are great features, but maybe not for all cases.
Please see the ...
- 29.7k
4
votes
0
answers
2k
views
Unhandled Runtime Error: Failed to load script: /_next/static/chunks/pages/api/twitter/generate-auth-link.js
I have a Link tag that looks like <Link href='/api/twitter/generate-auth-link'>Login with Twitter</Link>.
I have already created pages/api/twitter/generate-auth-link.ts that looks like:
...
- 7,641
3
votes
1
answer
3k
views
why nextjs link is prefetching on each hover?, how to disable it?
so it seems I'm using the latest version of Nextjs which is 13.2.4v, i also not using the app or src directory.
the problem is when i hover on the Link Next component, it will send a request to the ...
- 165
3
votes
1
answer
3k
views
NextJS add styling to a dynamic active link
I have more than 5 categories that have different products in them. So in my pages folder, I have a file named [...slug].js. All this URL's have different names;
For Ex these are my URL;
/phones
/...
- 155
2
votes
1
answer
1k
views
Link anchor (#) in NextJS not scrolling to id, but when manually typed in the url it works NEXTJS 13
I'm trying to make a single paged site where the navigations will scroll to a certain div or portion of the page. I searched the implementations but somehow it does not work when I click the link. The ...
- 63
2
votes
2
answers
5k
views
How to conditionally render a button / Link Next.js Component with TypeScript
I ran into a very annoying problem is that I get a bunch of typescript errors, while trying to conditionally render the Next.js Link component or a button element.
So if the href prop is passed, I ...
- 23
2
votes
1
answer
2k
views
NextLink Dynamic Route Not Working When In Dynamic Route
I have an dynamic route which is sitename.com/[username]
When I navigate from sitename.com/account to sitename.com/[username] (for example when I am in /account page, I click an username which is ...
2
votes
2
answers
1k
views
Next js dynamic routing for translation
I'm trying to set dynamic routes for translation for specific pages in next js using i18next. The following code works well, but this is routing to all pages and generating errors while next build.
...
2
votes
1
answer
275
views
The Smooth Scrolling is not working next/link
I am using next/Link but smooth scrolling is not working but when i use anchor tag it is working properly while using anchor tag page is reloading but next/link doesnt load page whenever path changes
...
- 110
2
votes
0
answers
2k
views
next/link is changing href attribute from relative to absolute
Using next/link
<Link href="/examples/fetch-rest-data" >
<a>SWR</a>
</Link>
I get an absolute href on the HTML
<li>
<a href="https://localhost/...
1
vote
2
answers
875
views
How to send data through Link in Next/JS?
My Next version is 13.1.5. I am trying to send contact.name through the Link in my component. Whats the best way to do this? The first code of the Link is just my original code.
<Link
...
1
vote
1
answer
71
views
NextJS dynamic routing, is "as" really necessary?
Both links work exactly the same, do we really need to use the as, can't we use just the href?
import Link from 'next/link'
export default function () {
return (<>
<Link href="/...
- 3,168
1
vote
1
answer
2k
views
How to fix Typescript error on Next JS next/link element
The following code is throwing me this Typescript error:
Type 'string' is not assignable to type 'RouteOrQuery'.ts(2322)
nextjs-routes.d.ts(32, 5): The expected type comes from property 'href' which ...
- 405
1
vote
1
answer
2k
views
How to add CSS or styled-components to Link tag in Next.js? [duplicate]
Cannot add styles in any way to next.js <Link> tag.
code:
import Link from "next/link";
import styles from "../Components.module.css";
export default function SubjectBTN({ ...
1
vote
2
answers
5k
views
NextJS Link href default value
I need a default href value for Next/Link, as we do in plain html like below
<a href='#' ></a>
I tried this to Link but it reloads the page, if I keep it empty it produces some error ...
- 93
1
vote
1
answer
190
views
Why are Next.js Next Link components not working in my project?
I'm following a nextjs tutorial and Next link is not working correctly even though it works fine for the guy in the tutorial. I did some testing the link the top first link is clickable but every ...
1
vote
4
answers
2k
views
NextJs <Link> doesn't rerun scripts
When I use the <Link> tag in NextJs to navigate between pages it doesn't rerun my scripts after changing pages. It only runs the scripts after the first page load or when I press reload. When ...
- 53
1
vote
2
answers
6k
views
How to send a unique id to the next page while navigating using Link in NextJS
I am trying to send an id to the next page when the user navigates.
I have a homepage where I am fetching an Array of data and using .map to display it in a kind of card-based UI.
Now, when the user ...
- 721
1
vote
1
answer
691
views
Render Custom Component Inside NextJS Link
Issue:
I have a component that should redirect users to a new page on click. I want to use Next's <Link> component to take care of the route change.
However, I've noticed that the Link component ...
- 1,180
1
vote
2
answers
505
views
How to wrap hashtag and @username with next Link?
I am working on an application where users can create posts and can mention other users and use the #hashtag in the post. Through API call I get the list of post, now the question is how can we wrap ...
- 928
1
vote
0
answers
282
views
Next.JS Link forces page reload on routing if internet connection is slow
I have a React Next.js application, and I use Next.js components for routing.
Everything works just perfect, unless the internet connection is getting slow.
Reproduced by throttling network in ...
1
vote
1
answer
387
views
NextJS Link with anchor navigates to the site's root
I'm new to NextJS, and I'm working on a page that's under a /security/ path.
On the file /app/security/page.jsx I have a simple link to an anchor tag
<Link href="#data-storage" scroll={...
- 2,419
1
vote
0
answers
300
views
MUI AppBar with next/link Button Click Issue
Using the MUI AppBar layout and next/link I am having an issue where only the link text results in a click being handled that results in navigation.
I am using what I believed to have been pretty ...
- 465
1
vote
1
answer
548
views
How to use next link href with condition
I have this code :
<a
onClick={() => {
if (fortype === "user") {
if (rd.track !== null) {
router.push({
pathname: `/tracks/${rd.track._id}`,
...
- 13
1
vote
0
answers
413
views
Next/Link keeps reload in components
It is said that in next js we don't need to install react-router-dom because the path of our pages depend on the pages folder. Well, it actually works when I create button to move to another pages. ...
1
vote
0
answers
142
views
nextjs force incompatible "href" and "as" attributes in next/Link
I have the following routes:
/categories/[categoryId]
/products/[productId]
/content/[contentId]
and I want to have SEO friendly URLs for them as follows:
https://example.com/category-name-c12345 - ...
- 701
1
vote
1
answer
425
views
How to fix net::ERR_ABORTED 404 (Not Found) when callink api route using next/link in NextJS
I have created an api route to download a CSV file and I am getting this error when using Next Link. I cannot just switch to because then my application will not build, so my hands are tied. The ...
- 1,370
1
vote
0
answers
35
views
Why does using [element].click() on the client bypasses router in Next.JS?
We have a React application using Next.js. My understanding is NextLink works by adding a click event to the element, stopping normal navigation and letting the router handle it instead. For example:
&...
- 1,590
1
vote
0
answers
47
views
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` There is no problem when I use 'ımg' [duplicate]
product.jsx
There is no problem when I use ımg but I want to use Next/image
and my old code was link, I edited it as nextLink
import React from 'react'
import NextLink from 'next/link'
import { urlFor ...
- 27
1
vote
0
answers
1k
views
How push history router without change URL
For example I have a form with three steps. I want that each step are in the history router but without changing de URL
Is it possible do it with Next Route or Next Link?
1
vote
0
answers
992
views
how to keep url query string values even on page refresh
I am using useRouter and Link, while navigating through my webapp. I attach query string to the links so that i can use the passed data of the query, in the page i am redirecting the user to. which ...
- 51
1
vote
1
answer
800
views
Nextjs Link concatenate issue
I am having an issue with the Next/Link component. My issue occurs when the user has reached the product details page. In the home page I have 3 link components that takes the user to either domain....
- 383
1
vote
1
answer
2k
views
Nextjs <Link> prefetch returns 404
I've built a Next.js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches.
Occasionally (usually after rebuilding but not always) my app starts ...
- 11
0
votes
1
answer
2k
views
How do you fix Next.js 14 next/link routing 404 error page issue
I just did a fresh install of Next.js using npx create-next-app@latest on Windows (using an elevated shell).
My /src/app/components/Header.tsx file has this code:
import React from 'react';
import ...
- 39
0
votes
2
answers
41
views
Problems to make the link component work in next.js [duplicate]
I have been doing a blog with next.js and I am creating the header, but the links are not working, I read the next.js documentation and made the links step by step, but every time I reload my website ...
0
votes
3
answers
9k
views
Next.js 13 routing params
Hi folks first of all i am new to react and nextjs. So i am sorry if my question is stupid.
I am currently building a navigation with nextjs 13 within new the app folder. Here is my navigation ...
- 1
0
votes
1
answer
807
views
How to navigate correctly in nextjs
idk it's pretty simple or what but having difficulty understanding it.
here is one parent div wrapped with nextjs Link tag(which navigates me to /playing route) and in this div i have one more tag ...
- 77
0
votes
1
answer
79
views
Reactjs Reusable component not updated when one of dependency library used at useEffect() change
I've a nextjs custom component that adds the locale before the pathname of the page when clicked and adds custom style for the active link..
here is the component
"use client";
import { ...
- 315
0
votes
1
answer
53
views
NextJS Dynamic Link for Page & Subpage
Using NextJS I Have Dynamic Pages and Dynamic SubPages.
Here is Folders/Files :
pages
├── [Formation]
├── index.js
│ ├── [SubPage].js
In index.js (Formation Page), I Create Links :
<Link href={`[...
- 95
0
votes
1
answer
285
views
NextJs: Next Link router query returns undefined after submitting form on page
I am using nextjs, I have a page where it lists out all clients, I can then click each client name that links (using next/link) to a page specifically for that client. It loads correctly using ...
- 21
0
votes
1
answer
49
views
Handling DynamicRouting
i have a challenge while using next/link while using the [folder] in next.js
enter image description here
above is my pages tree. A user is supposed to be sent to the route .types/[type] , type being ...
- 51
0
votes
0
answers
11
views
Issues with Next/Link with app folder - How can I stop 404'ing?
So here I have a part of my NavBar()
{/* Desktop Nav */}
<div className="hidden md:flex items-center space-x-6">
<Link href={item1Href}>
<...
- 1
0
votes
1
answer
50
views
How To Use Next Link for Routing to Avoid Page Refresh
Below is the code for my navbar:
'use client'
import { useState } from 'react';
import { GiHamburgerMenu } from 'react-icons/gi';
import Link from 'next/link';
import Image ...
0
votes
0
answers
36
views
Use script with next/link routing
In my nextjs project I have the following case:
Let's say I have two templates, myTemplate1 & myTemplate2.
In myTemplate1 after I render my components I have script. E.g:
return (... {...
- 1
0
votes
0
answers
141
views
Next JS next/link production links break when using browser back button on Mac/iOS
I'm using Next JS 14 to make a static site, very basic at https://manifestorretreat.com/. Using next/link for the links and I've come across an oddly specific problem.
When I click a link (for example ...