Next.js Discord

Discord Forum

App structure duplication

Answered
American Bobtail posted this in #help-forum
Open in Discord
American BobtailOP
Hello,

I have an app with that following structure:

app/
  page1/page.tsx
  page2/page.tsx


However, the page.tsx are literally the same as they are including a widget (which is using the pathname to select the right tab).

What would be the best approch to reduce that duplication please?
Answered by alfon
yes you might want to do that
View full answer

34 Replies

@alfon make your page in `app/layout.tsx`
American BobtailOP
thanks for your prompt answer, however I'll loose the ssr/ssg isn't it?
@alfon No
American BobtailOP
hum, how would I declare the page1/page2 routes then? Sorry seems that I'm getting lost there
also I may have 
app/
  page1/page.tsx
  page2/page.tsx
  anothertypeofpage/page.tsx


which anothertypeofpage is a completely different layout page
shall I create a routegroup above page1/page2 and have a layout inside this folder?
honestly
do you want ssr or ssg?
do you want page1 and page2 to be dynamically server rendered at request time OR statically rendered at deployment time?
American BobtailOP
I think that they can be statically rendered (or maybe i18n with react-i18next might block it?)
alfon
ill get back to you in a moment
Answer
alfon
eitherway
its just a page
it should be fine even if its not deduped.
but if you want to ensure deduplication, then you can prefetch the data via a script and read the file from there
https://nextjs-forum.com/post/1239224831707447417#message-1239252555729731624
@alfon honestly
American BobtailOP
hum, the thing is that if I am using this way, the component needs to be client side (coz I have to rely on usePathname to now where we are at), does not seem to be optimized is it?
@American Bobtail hum, the thing is that if I am using this way, the component needs to be client side (coz I have to rely on usePathname to now where we are at), does not seem to be optimized is it?
alfon
if you create a routegroup then you can just make app/(different)/anothertypeofpage/page.tsx and you will know where you are at
American BobtailOP
sorry I was talking about page1/page2 which would be app/(widget)/page.tsx I guess
and having a url kinda like acme.com/page1 acme.com/page2 within page.tsx having the param page to know if it shows tab page1 or page2 within the widget
acme.com/page1 also = acme.com/
alfon
app/(withWidget)/layout.tsx
app/(withWidget)/page.tsx
app/(withWidget)/page1/page.tsx

app/(without)/anothertypeofpage/page.tsx
no usePathname needed
@alfon tsx app/(withWidget)/layout.tsx app/(withWidget)/page.tsx app/(withWidget)/page1/page.tsx app/(without)/anothertypeofpage/page.tsx
American BobtailOP
but then the page.tsx for the line 2 and 3 will be exactly the same isn't it?
(unless the tab key)
and layout.tsx as well
alfon
not only they are same, but they are also empty, return null
you put your widget stuff in the (withWidget)/layout.tsx
@alfon you put your widget stuff in the `(withWidget)/layout.tsx`
American BobtailOP
but what about the tab key? With that structure I cannot know if I am on page1 or page2 from layout, can I?
I would like to know it to select the correct tab instantly
You can use usePathname yeah
Its still SSRd iirc