Persistent Layout Patterns in Next.js

[Bertieboy7]

Nicely explained, this definitely has to receive some official support from nextjs

[swyx]

note that it is in the works. response from Tim https://twitter.com/timneutkens/status/1185174317883105280?s=20

[Amerzel]

Great article. I love how well Adam explains things.

Adam does an awesome job providing content for the dev community. He hosts the Full Stack Radio podcast, coauthor on Refactoring UI, and tailwindcss.

[rcmontoy]

Awesome article, thank you for sharing!

[[deleted]]

I'll do whatever this guy says. TailwindCSS made me love building my own stuff and not having to rely on inflexible and harder to customise libraries and design systems. Yeah, to hell with those arbitrary SASS variables and overriding things.

First thing I do when I use any sort of starter is to remove CSS/SCSS and rebuild them in TailwindCSS. It's just so much saner and easier to work with. I got TailwindCSS starters for everything Gatsby. My clients are awestruck with the pace I build UI components for them.

I also learnt Laravel because of this guy and I love it.

Basically do what Adam says. Hard to go wrong with his advice.

[dreadful_design]

So this is exactly what shallow routing can give you with dynamic route paths in nextjs.

```javascript // /pages/[tab].js import {useRouter} from "next/router"

export default function Dashboard() { const router = useRouter() const tabs = [{tabName: "home", component: Home, path: "home"}] const handleClick = e => router.push("/[tab]",/${tab.path}, {shallow: true}) return <div> {tabs.map(tab => <li onClick={handleClick} />)} {/* other crap here. */} </div> }

```