Next.js Discord

Discord Forum

App structure duplication

Answered
Devon Rex posted this in #help-forum
Open in Discord
Devon RexOP
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 ᴉuɐpɹɐɐ
yes you might want to do that
View full answer

34 Replies

@ᴉuɐpɹɐɐ make your page in `app/layout.tsx`
Devon RexOP
thanks for your prompt answer, however I'll loose the ssr/ssg isn't it?
@ᴉuɐpɹɐɐ No
Devon RexOP
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?
Devon RexOP
I think that they can be statically rendered (or maybe i18n with react-i18next might block it?)
ᴉuɐpɹɐɐ
ill get back to you in a moment
Answer
ᴉuɐpɹɐɐ
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
@ᴉuɐpɹɐɐ honestly
Devon RexOP
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?
@Devon Rex 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?
ᴉuɐpɹɐɐ
if you create a routegroup then you can just make app/(different)/anothertypeofpage/page.tsx and you will know where you are at
Devon RexOP
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/
ᴉuɐpɹɐɐ
app/(withWidget)/layout.tsx
app/(withWidget)/page.tsx
app/(withWidget)/page1/page.tsx

app/(without)/anothertypeofpage/page.tsx
no usePathname needed
@ᴉuɐpɹɐɐ tsx app/(withWidget)/layout.tsx app/(withWidget)/page.tsx app/(withWidget)/page1/page.tsx app/(without)/anothertypeofpage/page.tsx
Devon RexOP
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
ᴉuɐpɹɐɐ
not only they are same, but they are also empty, return null
you put your widget stuff in the (withWidget)/layout.tsx
@ᴉuɐpɹɐɐ you put your widget stuff in the `(withWidget)/layout.tsx`
Devon RexOP
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