Using higher-order functions to build per-page layouts in Next.js - Brock Herion
brockherion.dev · 676 words · saved by 1 readers
This article will show you how to create per-page layouts in Next.js using a higher-order function.
This article is a follow-up to a previous one I wrote about setting up per-page layouts in Next.JS with tRPC and NextAuth. You don’t have to read the original before reading this, but it has more background and setup code snippets. You can find it here . Per-page layouts rundown Per-page layouts allow the React component tree to be maintained upon page navigation. The benefit here is our page state is preserved between navigation and creates a Single-Page Application experience for our users. You can add a page layout by adding a property to your page called getLayout // pages/home.tsx export
related reading
- Getting Started: Layouts and Pages | Next.jsnextjs.org
- Getting Started: Layouts and Pages | Next.jsnextjs.org
- Building a single-page application with Next.js and React Routercolinhacks.com
- Build your own Reactpomb.us
- You Might Not Need an Effect – Reactreact.dev
- App Router: Navigating Between Pages | Next.jsnextjs.org
- Crafting the Next.js Websiterauno.me
- Tao of React - Software Design, Architecture & Best Practices | Alex Kondovalexkondov.com
- App Router: Streaming | Next.jsnextjs.org
- Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
- Getting Started: Error Handling | Next.jsnextjs.org
- Modularizing React Applications with Established UI Patternsmartinfowler.com