flâneur — a map of the web's best reading

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

Explore this link on the map →

related reading