Building a Component-Driven Landing Page with Next.js and Sanity
Friday, September 1st, 2023
Introduction
In this walkthrough, we’ll break down how to create a component-driven landing page using Next.js and Sanity, giving marketers full content control while keeping developers focused on scalable, reusable components
Step 1: Content Modeling in Sanity
The first step is to define the page structure in Sanity Studio.
landingPage.schema.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
name: 'landingPage',
type: 'document',
title: 'Landing Page',
fields: [
{
name: 'title',
type: 'string',
title: 'Page Title',
},
{
name: 'sections',
type: 'array',
title: 'Page Sections',
of: [{ type: 'heroSection' }, { type: 'ctaSection' }]
}
]
}Step 2: Building Dynamic Components in Next.js
In your page component, map over sections to dynamically render React components.
SectionRenderer.jsx
javascript
1
2
3
4
5
6
7
const LandingPage = ({ pageData }) => (
<main>
{pageData.sections.map((section, index) => (
<SectionRenderer key={index} section={section} />
))}
</main>
)Step 3: Preview Setup
Enable real-time previews so editors can see changes immediately.
fetchSanityPageData.js
javascript
1
2
3
4
5
export async function getServerSideProps(context) {
const preview = context.preview || false;
const pageData = await fetchSanityPageData(preview);
return { props: { pageData } }
}