Primeiros passos com Next.js e App Router

Por que Next.js?

O Next.js é um framework React que permite criar aplicações web com renderização no servidor (SSR), geração estática (SSG) e muito mais. Com o App Router, o Next.js introduziu uma nova forma de organizar rotas baseada em pastas.

Configurando o projeto

Para criar um novo projeto Next.js com App Router e TypeScript:

npx create-next-app@latest my-app --typescript --tailwind --app

Isso vai configurar tudo para ti:

• Next.js com App Router
• TypeScript para tipagem estática
• Tailwind CSS para estilização

Estrutura de pastas

O App Router organiza as rotas baseado em pastas:

src/
  app/
    page.tsx          -> /
    about/
      page.tsx        -> /about
    blog/
      [slug]/
        page.tsx      -> /blog/:slug
    layout.tsx        -> Layout raiz

Vantagens do App Router

1. Server Components por defeito - menos JavaScript no cliente
2. Layouts aninhados - layouts que preservam estado
3. Loading UI - estados de carregamento nativos
4. Error handling - tratamento de erros por rota

Conclusão

O Next.js com App Router é uma ferramenta poderosa para criar aplicações web modernas. Se ainda não experimentaste, vale a pena dar uma oportunidade!