Criando Landing Pages com Next.js: Usando getStaticProps e getStaticPaths

Introdução

Landing pages são páginas criadas com foco em conversão e visibilidade. Para garantir uma boa performance e indexação no Google, é fundamental que essas páginas sejam geradas estaticamente.

O Next.js oferece duas funções essenciais para isso: getStaticProps e getStaticPaths. Neste post, vamos entender como essas funções funcionam e como criar uma estrutura dinâmica de LPs que seja rápida e otimizada para SEO.

---

Pré-requisitos

Para acompanhar este post, você deve ter:

• Conhecimentos básicos de React
• Familiaridade com Next.js
• Entendimento sobre rotas e props em componentes

---

O que são getStaticProps e getStaticPaths?

getStaticProps

Essa função permite buscar dados em tempo de build, gerando uma página estática com conteúdo dinâmico.

getStaticPaths

Usada em páginas dinâmicas, essa função informa ao Next.js quais rotas devem ser pré-renderizadas com getStaticProps.

---

Exemplo: Criando LPs Dinâmicas

Estrutura de arquivos

pages/
└── lp/
    └── [slug].tsx

Código: pages/lp/[slug].tsx

import { GetStaticProps, GetStaticPaths } from 'next'

type LPProps = {
	title: string
	content: string
}

export default function LandingPage({ title, content }: LPProps) {
	return (
		<div>
			<h1>{title}</h1>
			<p>{content}</p>
		</div>
	)
}

// Dados de exemplo
const lps = [
	{ slug: 'curso-react', title: 'Curso de React', content: 'Aprenda React do zero.' },
	{ slug: 'curso-nextjs', title: 'Curso de Next.js', content: 'Domine o framework Next.js!' }
]

export const getStaticPaths: GetStaticPaths = async () => {
	const paths = lps.map((lp) => ({ params: { slug: lp.slug } }))
	return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async (context) => {
	const { slug } = context.params as { slug: string }
	const lp = lps.find((p) => p.slug === slug)

	return {
		props: {
			title: lp?.title || '',
			content: lp?.content || ''
		}
	}
}

---

Resultado

Ao acessar /lp/curso-react ou /lp/curso-nextjs, o Next.js vai servir uma página gerada estaticamente com o conteúdo correspondente ao slug.

Essa abordagem traz:

• Melhor SEO
• Performance altíssima
• Menor custo de hospedagem

---

Mini-projeto: Criando LPs a partir de um CMS fake

Imagine que seu conteúdo venha de uma API ou CMS. Basta adaptar as funções para buscar dados reais.

Exemplo com fetch

export const getStaticPaths: GetStaticPaths = async () => {
	const res = await fetch('https://meu-cms.com/api/lps')
	const data = await res.json()

	const paths = data.map((lp: any) => ({ params: { slug: lp.slug } }))

	return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
	const res = await fetch(`https://meu-cms.com/api/lps/${params?.slug}`)
	const data = await res.json()

	return {
		props: {
			title: data.title,
			content: data.content
		}
	}
}

---

Próximos Passos

• Usar fallback: true para gerar páginas sob demanda
• Integrar com CMSs reais como Strapi, Sanity ou Headless WordPress
• Gerar metadados dinâmicos para SEO avançado
• Adicionar blocos visuais com componentes reutilizáveis

---

Materiais de Apoio

• 📘 Documentação oficial getStaticProps
• 📘 Documentação oficial getStaticPaths
• 🎥 Vídeo: Static Site Generation no Next.js

---

Agora você pode criar landing pages dinâmicas, rápidas e otimizadas para SEO com facilidade! 🚀