Blocked on nested routes | Next.js | Page 1

indigo oasis Dec 9, 2021, 5:53 AM

#

indigo oasis Dec 9, 2021, 7:07 AM

#

I tried to implement the ideas described above and ended up with a folder structure like this:

pages
  accounts
    index.tsx
    [accountId]
      holdings.tsx
      orders.tsx

Note that I have not implemented the order-details path yet, but does this look right so far?

The only concern I have is that the deeper I go, the pages are repeating the code from the shallower pages. For example,

/account/index.tsx fetches accounts and renders them in the sidebar.
/account/[accountId]/holdings.tsx also fetches accounts and renders them in the sidebar (in additon to fetching holdings and rendering them).

Is there a better way?

candid wagon Dec 9, 2021, 8:57 AM

#

https://nextjs.org/docs/basic-features/layouts

#

you can use client-side perPage layout, the layout loads the data, you simply need to set it up for each page. Did you try that already?

#

I know this part of Next is confusing, but remember that an user can reach each page directly via URL, so they kinda behave as their own, independant website (that's what make Next.js fast). The price to pay is that you need to configure the layout for each page currently, but you can still have 99% of the code reused using either client-side layout, or a reusable helper to implement your getServerSideProps

slender parcel Dec 9, 2021, 9:27 AM

#

Stack Overflow

Next Js shows index page content on refresh dynamic page URL

Here below is my next.config.js file:
module.exports = {
trailingSlash: true,
reactStrictMode: true,
PAGE_LIMIT:3,
env: {
BASE_URL: process.env.BASE_URL,
TOKEN: process.env.TOKEN
...

indigo oasis Dec 9, 2021, 1:40 PM

#

Thanks for your response @candid wagon. I haven't tried layouts yet, will try it. I don't see any examples of layouts loading data, so the question is if they can have getServerSideProps() of their own. If yes, I can implement the sidebar as a layout, otherwise I will have to make it a regular react component and pass data to it.

#

@slender parcel, I looked at the SO question. I don't think it is related to what I am asking.

#

@candid wagon, also reading the docs, I am not seeing the benefits of per page layout (https://nextjs.org/docs/basic-features/layouts#per-page-layouts). What does the getLayout() function buy me? I might as well add the layout to the page markup directly! I must be missing something 🤔

candid wagon Dec 9, 2021, 1:56 PM

#

indigo oasis <@!769111741098622976>, also reading the docs, I am not seeing the benefits of p...

The layout won't remount on page change => won't trigger a request everytime + you put duplicate code there

#

check the very last section for data fetching: https://nextjs.org/docs/basic-features/layouts#data-fetching

#

You'd want to check this excellent read, dating from before layouts were introduced in Next.js: https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

Persistent Layout Patterns in Next.js

Strategies for persisting UI elements across page transitions when working with Next.js.

#

the "persistent" part is the key here, that's the difference with just adding the layout to page markup

indigo oasis Dec 9, 2021, 3:46 PM

#

Thank you again for this reference, @candid wagon. The Next docs do not describe what "persistence" means in this context. I was thinking persistence as in component state persistence!!

#Blocked on nested routes