Route equivalent in Next.js with render feature for nested component routes?

Question

I am fairly new to Next.js and till now been having an awesome experience with it. However, I am confused how to do equivalent of the below code in Next.js Mainly all these are client side routes and render nested components in the user page.

${currentPath} is /user in the below snippet.

    <div>
     <UserNavbar/>
     <SecondaryNavbar/>
      <div>
        <Route path={`${currentPath}/dashboard`} exact
         render={() => <Dashboard {...this.props}/>} />
        <Route path={`${currentPath}/listings`} exact
         render={() => <Listings {...this.props}/>} />
        <Route path={`${currentPath}/listings/new`} exact
         render={() => <AddNewListing {...this.props}/>} />
        <Route path={`${currentPath}/account`} exact
         render={() => <Account {...this.props} /> } />
     </div>
    </div>

Could be that I am completely off-track about this one. I've tried finding help on this in Next.js spectrum chat as well.

Any help is appreciated. Thanks!

Answer 1

One of the solution I can think of is to completely leave routing for Next.js

Just create the following folder structure

pages/
  user/
    account.js
    dashboard.js
    listings.js
    // etc...
  user.js

Where each route eg /user/account will be rendered by respective js file eg user/account.js

Example /pages/user.js file

import Link from 'next/link';

export default () => {
  return (
    <div>
      <h1>User page</h1>
      <ul>
        <li>
          Go to <Link href="/user/account">account</Link>
        </li>
      </ul>
    </div>
  );
}

/pages/user/account.js

export default () => {
  return <div>account</div>;
};

I might be missing what you want to implement exactly but hope this helps :)