Como estruturar projetos Next.js em 2024

A estrutura de um projeto Next.js App Router precisa favorecer duas coisas: clareza para o time e evolução sem retrabalho.

A documentação oficial de MDX e App Router reforça um modelo orientado a rotas, layouts e componentes de servidor por padrão. Isso ajuda a reduzir JavaScript no cliente e simplifica data fetching.

Estrutura base recomendada

app/
  (site)/
    page.tsx
    blog/
      page.tsx
      [slug]/
        page.tsx
  api/
components/
lib/
content/

Regras práticas que funcionam bem

1. Deixe tudo que for rota em app/.
2. Centralize utilidades de domínio em lib/.
3. Prefira Server Components e só use "use client" quando houver interatividade real.
4. Defina limites claros: UI em components, regras de negócio em lib.

Organização por domínio

Quando o projeto cresce, separar por domínio evita acoplamento excessivo:

• lib/blog/* para catálogo, parser de conteúdo e helpers.
• components/blog/* para cartões, filtros e navegação de artigos.
• app/blog/* para rotas e composição final.

Padrão de dados estáticos

Para blog e páginas institucionais, vale manter um catálogo tipado:

export interface BlogPostMeta {
  slug: string;
  title: string;
  category: string;
  date: string;
}

Com isso, filtros e links ficam consistentes entre home, listagem e página do post.

Checklist de manutenção

• Evite duplicar fonte de verdade para posts.
• Nomeie slugs com estabilidade para não quebrar links.
• Use layouts compartilhados para manter tipografia e navegação consistentes.
• Crie convenções de pastas e registre no README.

Uma boa estrutura não é a mais "perfeita"; é a que deixa o time entregar com previsibilidade.