Next.js - generate persistent layout with getStaticProps at build time

user_6372449 0
Viewed 927

I am using this pattern for building persistent layouts in Next.js: Persistent Layout Patterns in Next.js

It works fine when your layout doesn't rely on external data.

What to do if you want to build a documentation like page - and in your layout there is a sidebar with sections like Getting Started, Examples, FAQ, About? Ideally I would like to store those sections in a markdown file and generate the layout at the build time.

// markdown file
---
section_1: "Getting Started"
section_2: "Examples"
section_3: "FAQ"
section_4: "About"
---

How to achieve such functionality with Next.JS and getStaticProps?

vercel typescript next.js
1 Answers

getStaticProps can be used only in a page, so it's not an option to generate layout component.

You can extend the build process by writing a custom Node.js script that will read the markdown and create a .json file with the sidebar sections.

The created .json file can be imported in the Layout component on a client-side.

You would need to extend npm script build in the package.json, so next build and your script would run with one command.

user_59640230
Related