Next.js Discord

Discord Forum

I need help understanding how I should structure my .tsx files for Next.js.

Unanswered
Silver Marten posted this in #help-forum
Open in Discord
Silver MartenOP
I wish to use Link from react-router-dom and such, I've already created a decent amount of components but it's all starting to fall apart now that I'm trying to implement Link, and idk how to proceed from here. It'd be great if someone could help guide me with the structuring convention I should follow for Next.js. (Preferably if we could dm or call w/ screenshare)

10 Replies

Silver MartenOP
Link seems to work, but I'm getting this error message and I have absolutely no idea what's causing it.
I don't even know where to begin figuring out what the problem could be.
Seppala Siberian Sleddog
Well the error is that the Link component that you are using or any code in that file is being run on the server side because the default for the app router I assume that you are using runs on the server on the server environment you don't have the document or any other browser API, 'use client'; directive should fix the error, but you should read this page
https://nextjs.org/learn/react-foundations/server-and-client-components
Silver MartenOP
The problem is that I've already added "use client" on every single page I've made just to see if it fixed anything, and it didn't 😦 The client side page works as intended, but its just the server-side error message that I'm concerned about.
Silver MartenOP
https://github.com/Shamanbenny/SneakyOwl
@Silver Marten https://github.com/Shamanbenny/SneakyOwl
Seppala Siberian Sleddog
But why do you want to use the react-router in next js?
Silver MartenOP
I wanted to use Link so that it wouldn't have to re-render the page each redirect
Could I do it without react-router?
Seppala Siberian Sleddog
You mean refreshing it, re-render will happen no matter what type of link you are using, but to not hard refresh the page use NextJs Link you can import it like this
 import Link from 'next\link'
Read this docs that might help you
https://nextjs.org/docs/app/building-your-application/routing