All Questions
35
questions
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
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 ...
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
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
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
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
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
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
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
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
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
12
views
How to scroll to the main component on backpress in Next JS using Links?
Here is what I want to achieve. I have few components that I have embedded in my layout. The sidebar is component is mapping through the Links to display links. When i click on the link, I move to ...
- 63
0
votes
1
answer
814
views
Anchor links (#) not working within the same page in Next.JS app router
I have a <Link/> component with the href set to #targetDiv in my Next.js app. Ideally, when a user clicks on the button/link, the page should scroll to the respective section with the id #...
- 11
0
votes
0
answers
474
views
NextJS13 doesn't scroll to top after redirect
I've wrote a whole code of site using but unfortunetly in NextJS 13 it doesn't scroll me to top of the page after redirect. Any ideas why? I checked documentation and there is scroll={true} as ...
0
votes
1
answer
226
views
How to do components wise routing in NEXT.js? [closed]
I have a sidebar which contains some tabs like profile, settings, insights now when click on one of the tab it should show particular content where routes should change but page should not be refresh.
...
0
votes
0
answers
1k
views
Next / Link doesn't route to the next page when clicked before the page has completely loaded
import Link from 'next/link';
...
<Link href="/test">test</Link>
Clicking on the link doesn't route to the next page when the network is slow, and the entire page hasn't been ...
0
votes
1
answer
2k
views
next/link redirect and should to scroll, it should directly positioning to top
I have next js web, which has some links to redirect on the footer,
so if I click on that link it is first redirected to that page with scrolled down(current position) and then scrolls the up
I don't ...
- 61
0
votes
0
answers
77
views
Next/Link works laggy
I have next.js site on production works with strapi. I have three main pages and dynamic sub pages.
- "/"
- "/[slug]"
- "/About"
- "/Contact"
"/[slug]...
- 57
0
votes
1
answer
60
views
"Hydration failed because the initial UI does not match......" error showing when I m nesting multiple div inside next Link tag
React 18: Hydration failed because the initial UI does not match what was rendered on the server error showing when I am nesting multiple div in a Link tag
my code is given below:-
<Link href={'/...
-1
votes
1
answer
517
views
Page routing through dropdown (NEXT.js)
I want to route to different pages through dropdown selection. I'm new to react & next, and i have no idea how to do it.
"use client"
import Link from 'next/link';
function Home() {
...
- 33
-1
votes
1
answer
203
views
does next link has built in style
Next Link ruin my style (display flex)
<main>
<div className="flex">
{res.results.map((movie) => (
<Image
src={imagePath + movie....
-1
votes
1
answer
123
views
How do I make the Link appear above the component I made?
How do I make the Link appear above the component I made?
Im using Next.js 11 version.
This is error message.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. ...
- 123