Implementing /app/[slug]/dashboard, /app/[slug]/settings in an app

[vvo]

Hi there, I essentially want to know how would you implement a statically generated website/app where you would have routes like:

• /app/[slug]/dashboard
• /app/[slug]/settings
• /app/[slug]/team

Knowing that dashboard/settings/team all share the same layout/nav and only the content changes. I am trying to wrap my head around the right solution but unsure if it should be:

• app/[slug]/dashboard.js and app/[slug]/settings.js
  or
• app/[...slug].js where in slug.js I would switch/case

Then for the layout itself, in both solutions, not sure what to apply.

Let me know!

[vvo]

Here's my first approach:

/app/[...organization].js

import React from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import AppLayout from "components/AppLayout";

const Components = {
  dashboard: dynamic(() => import("components/organization/Dashboard")),
  settings: dynamic(() => import("components/organization/Settings")),
};

export default function Organization() {
  const router = useRouter();

  // /app/zeit/dashboard
  const query = router?.query?.organization;
  const Component = Components[query?.[1]];

  if (query === undefined) {
    return <div>Loading</div>;
  }

  if (Component === undefined) {
    router.push("/404");
    return;
  }

  return (
    <AppLayout>
      <Component />
    </AppLayout>
  );
}

This works, given you create links this way:

<Link
  href="/app/[...organization]/dashboard"
  as={`/app/${router.query.organization[0]}/dashboard`}
/>

But I am not quite sure this is a good way to do it. Especially because the navigation seems slower. I have read https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/ but was not able to apply the same patterns here.

Let me know!

Shameless random ping for help: @adamwathan @flaviocopes

[vvo]

cc also @clemencov since it seems you worked on persistent layouts ideas

[vvo]

Ok now solved I believe, here's how to do it properly (? please confirm :D):

pages/_app.js:

import React from "react";
import dynamic from "next/dynamic";

const layouts = {
  AppLayout: dynamic(() => import("../components/layouts/AppLayout")),
  Main: function Main({ children }) {
    return <div>{children}</div>;
  },
};

function MyApp({ Component, pageProps }) {
  const Layout = layouts[Component.layout || "Main"];

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

components/layouts/AppLayout.js:

export default function AppLayout({children}) {
  return <>{children}</>
}

pages/app/[organization]/dashboard.js:

function Dashboard() {
  return <div>Dashboard</div>;
}

Dashboard.layout = "AppLayout";

export default Dashboard;

pages/app/[organization]/settings.js:

function Settings() {
  return <div>Settings</div>;
}

Settings.layout = "AppLayout";

export default Settings;

components/Sidebar.js

import Link from "next/link";

export default function Sidebar() {
  return (
    <nav>
      <Link
        href="/app/[organization]/dashboard"
        as={`/app/${router.query.organization}/dashboard`}
      />
      <Link
        href="/app/[organization]/settings"
        as={`/app/${router.query.organization}/settings`}
      />
    </nav>
  )
}

It works pretty well and the navigation is as performant as you would expect from a Next.js application.

[vvo]

I am not sure it's better to do dynamic Layout imports + Dashboard.layout = "AppLayout" vs just import AppLayout + Dashboard.layout = AppLayout.

Thoughts @arunoda since you proposed the former here: #4129 (comment) 🙏

[timneutkens]

It's generally better to import the component and attach it to Dashboard.layout = AppLayout because then you're not bundling all layouts in _app.js.

[vvo]

Thanks, I was wondering between attaching it directly and dynamic loading of the layout in _app.

[TommySorensen]

Why not just change the layout in the slug file?

// _app.js

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
        <AppLayout> // This is the main layout like header and footer
          <Component {...pageProps} />
        </AppLayout>
    )
  }
}

And then the slug file

const Page = props => {
  const router = useRouter()

  if (router.asPath == '/something/something') {
    return (
      <div class="some-other-layout">
        <h1>Title</h1>
      </div>
    )
  }

  return (
    <div class="something">
      <h1>Title</h1>
    </div>
  )
}

[timneutkens]

Generally you shouldn't create a catch-all route for this purpose as it's very easy to ship too much code and for nothing to be automatically code-split.
Even the example that you gave already has the pitfall of shipping too much code (2 layouts where only 1 is rendered).

[TommySorensen]

Yeah you are right with the 2 layouts. But i see no other way to do it @timneutkens ?

What if you have a CMS with 1000 pages and you have 2 services like this:
someurl.com/api/getUrlsForMenuAndFooter
This will be user to get urls for getStaticPaths and build a menu

someurl.com/api/page?url=somepage/somepage
This is just the content for the specific page requested

That means that all pages is dynamic rendered based on what comes back of each page?url=somepage/somepage call. That could be a list of modules that i will render as components.

This can only be done with a file called [...slug].js in /pagesand a pages/index.js files that just has export { default, getStaticProps } from './[...slug]'

That's the same problem as @vvo is facing

[timneutkens]

Not exactly though, as you can see here: #11187 (comment)

There's multiple pages that share a layout.

If the layout comes from a CMS you have to use next/dynamic to only load the right layout when it's rendered.

[TommySorensen]

Ok i see 🙂🎉
I will try to use the same approach then, since i am i completely same situation in my other discussion #11192 just with redux and catch all route.
Thanks for the clarification.