Checkout layout pages on the nextjs docs

import this component inside layout.tsx

I did, but the same thing happens

can you show me your layout.tsx code?

import navbae above the main element

you havent included navbar inside the layout, therefore will not persist across the pages

I did try that, but it didn’t work

could you show me? how you did try that

I’m sorry but I think you should take a step back and look at some of the basics of react.

It should be something like this.

in your layout

ok, so i did that exaatly, but it dosnt show on all the pages

Please show your code.

This is how everyone does it. It has worked this way pre app router.

im taking a screenshot now

You dont have to tell me 😂

that your taking a screenshot

You have a pages folder.

I would need to see more about your structure. your layout will not transition to a page in your pages folder.

They are separate code basis essentially in terms of compilation steps

What layout do I use?

That’s what I’ve been seeing

Again, I dont know. you are using the pages router and the app router at the same time, why are you doing that?

It would be different if you had a production application and you were migrating, but you wouldnt be asking these questions.

The video I provided provides imperical evidence that the advise I and @Coffee Coke have given is in fact how you acheive a layout that is replicated across all your children pages under it.

I’ve litterally just created this project, and routing using the Nextjs way

Thats not correct.

You are routing using both of the nextjs ways

What other way am I routing? I’m just using <link>

There are two seperate things, they shouldnt be used at the same time.

Lol

Your not understanding fundamentally.

I was going to suggest maybe watching a tutorial

or read starter guide on next.js docs

I would suggest learning basics before starting the project

no offense

If its a new project you should NOT have a /app and a /pages

or find a tutorial video taht was made within the last 6 months and watch to learn.

Litterally…. This is a template from Nextjs website

Thats incorrect, it is not.

Show me where it says that its recommended.

It is…. It’s off of their website

Okay.

Ive given the advise I can give bud.

Good luck

That’s where you filter the templates, I chose Supabase and blog

Again, ive given what I can give, and there are 3 people telling you that your incorrect.

and you should start from the beggining

Dont just download a template, a template is for when you have read through the docs and you understand the framework to a minimum basic degree.

Not trying to sound like a dick, just being real with you.

Why would Nextjs even provide this then?

If this is the template your using, they are using the pages router. Please refer to

but again, I would recommend not starting with a template, because you dont understand the fundamentals.

Good luck.

alr lets do something

Ok, thank you
I just created one using the default command…. Same problem

i really really dont recommend you using a template

you have to know basics of react

lets start with a simple question

are you a beginner ? @Beveren

No, I’ve been focusing on the backend for a while, and data. I’ve made fullstack projects, and litterally, official documents for frameworks were wrong and had errors. It wasn’t my fault 😆

again, are you a beginner to react? my question wasnt properly answered

I’m waiting to get data from Supabase DB, not internal using “{slug}”

No, I’m not a beginner

@Jboncz help me out here

why do we consider the OP a beginner?

or at least someone that doesnt understand the fundamentals?

okay i see

well, considering almost 3 people told you, you are a beginner

i would really listen to them

LOL

its true

why you using both @Beveren

I’m not saying you are a beginner to JavaScript I’m saying you are a beginner in respect to the nextjs framework. There are fundamental issues that you don’t see because you are using a template and no referencing the docs. Disregard the template do create-next-app@latest. Start with nothing and walk through the actual docs not using a template that appears to be very out of date.

oh gotchu

we not saying

he is beginner to react

but to nextjs

Yes

If he doesn’t know the difference between app router and pages router and has both in a NEW project it is a fundamental misunderstanding of the frameworks purpose.

ye OP should really watch a basics NextJs tutorial

i agree

is there any problem here?

Problem? He can’t get layout working.

I know but besides that

And I believe it’s because he has a layout in app router but he is navigating to a page route and layout doesn’t trickle down

Nope

imo layout is easiest part of next

I think the installation is the easiest but layout works too

I have my two cents but @Masai Lion asked me for a brief rundown so there it is. I’m out again gl

new --empty flag is the lifesaver

saves me lots of time

easiest is just forking and running npm install and then npx run build

ty

I have 😆 and I’ve done exactly as they do, but the nav isn’t showing up

No lol you have to start from 0

You messed up so bad, pls don’t take it as an offense

Honesty, im following tutorials, and its just isn’t working

Start from 0

start by reading the documentation, documentations are much more useful and time-saving then tutorials

Litterally, the tutorial is going over the documents

I made this for you. Please download, open your command line interface and use

npm i
then after installation complete run
npm run dev

I got the nav to work, it took away all the default global styles

Its a good idea to follow the advice mentioned here by the other devs, it will help you a lot