Next.js Discord

Discord Forum

Nextjs App router loading.tsx and not-found.tsx

Answered
Rampur Greyhound posted this in #help-forum
Open in Discord
Rampur GreyhoundOP
Hi everyone i have two question regarding NextJs with AppRouter option:
1. when in doc i read 
By default, this file is a Server Component - but can also be used as a Client Component through the "use client" directive.

it means that works on client side always in async function or also in situation where window is undefined?

2. How can create a custom layout for not-found component in this situation:
- app/
- lajout.tsx
- template.tsx
- page.tsx
- not-found.tsx

Now if i go to page that not exist i see the template of my page with navbar etc etc and inside the content the page not found message... i would like to show only not found content without navbar etc etc

Thanks for your help
Answered by riský
why is it diferent on client? that doesn't sound like a good thing... you can use next/dynamic and ssr disabled to not have the errors tho (but its client only and js disabled sees nothing) see https://nextjs-faq.com/browser-api-client-component#using-nextdynamic-with-ssr-false
View full answer

25 Replies

Rampur GreyhoundOP
Regarding the second question for the moment i have used this solution: the not found has fixed position and page size
it means that works on client side always in async function or also in situation where window is undefined?
async function is always server, but you can put use client to have useState and other client features
@riský > i would like to show only not found content without navbar etc etc you should be able to use route groups and have not-found in different to main layout
Rampur GreyhoundOP
Ehi thank you for your help... yes I could do as you say but that would mean inserting not-found file in every route (folder).
riský
i think for actual not found (ie not calling notFound), it only uses the root one for some reason
@riský > it means that works on client side always in async function or also in situation where window is undefined? async function is always server, but you can put `use client` to have useState and other client features
Rampur GreyhoundOP
yes sure... but if my problem is not async but a classical problem to on server side is different from client side (hydration)... in this case i cant'use suspense....
@riský i think for actual not found (ie not calling `notFound`), it only uses the root one for some reason
Rampur GreyhoundOP
sorry i don't understand what do you mean
riský
like if you don't have a pathname made (/page/thingy/page.tsx), it uses only the root not found page (but this may have changed)
@Rampur Greyhound yes sure... but if my problem is not async but a classical problem to on server side is different from client side (hydration)... in this case i cant'use suspense....
riský
why is it diferent on client? that doesn't sound like a good thing... you can use next/dynamic and ssr disabled to not have the errors tho (but its client only and js disabled sees nothing) see https://nextjs-faq.com/browser-api-client-component#using-nextdynamic-with-ssr-false
Answer
@riský <https://nextjs.org/docs/app/api-reference/file-conventions/not-found>
Rampur GreyhoundOP
yeah i've read questo i would like to use only not-found in root but image that my app has a sidebar and navbar, these are inside template file inside root .
Others routes ( dashboard, user etc etc) have all the same structure (sidebar navbar)... i woul like that when user visit a any page not found, a page wiithout navbar e sidebar is shown him....
riský
yeah so its good then
same page thrown to users no matter the url (as long as it doesn't exist)
riský
@Rampur Greyhound any more questions?
@riský same page thrown to users no matter the url (as long as it doesn't exist)
Rampur GreyhoundOP
but i don't understand how to solve... because not-found is render after template and i see also sidebar and navbar
https://nextjs.org/docs/app/building-your-application/routing#component-hierarchy
riský
have you made route groups yet?
Rampur GreyhoundOP
i don't understand how to organize this group...
so i have at the moment this:
app/
-lajout.tsx
-template.tsx
-page.tsx
-not-found.tsx
-route1/
-route2/
-etc etc

so template has the navbar and sidebar and not-found is after template in order of structure
riský
lajout is layout right
@riský *lajout is layout right*
Rampur GreyhoundOP
yes sorry 🙂
@Rampur Greyhound Because component is not mounted... do you think is better dynamic or use an hook for example hasMounted?
riský
well if you want it to be client only, then yeah dynamic is good
Rampur GreyhoundOP
ok probably this :
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
can help me ...
riský
how can i help you... it has everything to know in that section of docs
Rampur GreyhoundOP
Thanks for your help!