Next.js revolucionou o desenvolvimento do React com seus recursos poderosos e design intuitivo. Com o lançamento do Next.js 13, o novo App Router assumiu o centro das atenções, oferecendo aos desenvolvedores uma maneira mais flexível e poderosa de estruturar seus aplicativos. Neste guia completo, nos aprofundaremos no App Router, explorando seus recursos e práticas recomendadas. Para ilustrar esses conceitos, usaremos um exemplo do mundo real: um projeto gerador de cartas de apresentação.

Compreendendo o roteador de aplicativos

O App Router em Next.js 13 representa uma mudança de paradigma na forma como abordamos o roteamento em aplicativos React. Ao contrário do Pages Router anterior, o App Router usa uma abordagem baseada em sistema de arquivos que se alinha mais de perto com a forma como modelamos mentalmente a estrutura de nosso aplicativo.

Principais benefícios do roteador de aplicativos:

1. Roteamento intuitivo baseado em arquivo: as rotas são definidas pela estrutura de arquivos no diretório do seu aplicativo.
2. Desempenho aprimorado: Suporte integrado para componentes do React Server.
3. Flexibilidade aprimorada: implementação mais fácil de layouts, roteamento aninhado e muito mais.
4. Otimizações integradas: divisão e pré-busca automática de código.

Introdução ao App Router

Vamos começar configurando um novo projeto Next.js 13 com o App Router. Abra seu terminal e execute:

npx create-next-app@latest my-app
cd my-app

Quando solicitado, certifique-se de selecionar "Sim" para "Você gostaria de usar o App Router?".

Roteamento básico com App Router

No App Router, cada pasta representa um segmento de rota. Vamos criar uma estrutura simples para nosso gerador de cartas de apresentação:

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

Aqui, page.tsx na pasta raiz do aplicativo representa a página inicial. As pastas de carta de apresentação e modelos criam rotas para essas respectivas páginas.

Em app/page.tsx:

export default function Home() {
  return 
Welcome to the Cover Letter Generator
;
}

Em app/carta de apresentação/page.tsx:

export default function CoverLetter() {
  return 
Create Your Cover Letter
;
}

Com esta estrutura, você pode navegar para / para a página inicial e /cover-letter para a página de criação da carta de apresentação.

Layouts e rotas aninhadas

Um dos recursos poderosos do App Router é a capacidade de criar layouts aninhados. Vamos adicionar um layout comum para nossa aplicação.

Em app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Esse layout será aplicado a todas as páginas do nosso aplicativo, fornecendo uma estrutura de navegação consistente.

Rotas Dinâmicas

As rotas dinâmicas são cruciais para aplicações que geram conteúdo com base em parâmetros. Vamos implementar uma rota dinâmica para visualizar modelos específicos de cartas de apresentação.

Crie um novo arquivo: app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return 
Template {params.id}
;
}

Agora, navegar para /templates/1 ou /templates/formal renderizará este componente com o respectivo id.

Componentes de servidor e busca de dados

Next.js 13 apresenta React Server Components, permitindo-nos buscar dados no servidor. Vamos implementar isso em nosso gerador de cartas de apresentação.

Em app/carta de apresentação/page.tsx:

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    

      
Create Your Cover Letter
      

        {templates.map(template => (
          
{template.name}
        ))}
      
    
  );
}

Este componente busca dados no servidor, melhorando o desempenho e o SEO.

Vinculação e navegação

Para navegação do lado do cliente, use o componente Link do Next.js. Atualize seu app/layout.tsx:

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Aplicação no mundo real: gerador de cartas de apresentação

Agora que cobrimos o básico, vamos ver como esses conceitos são aplicados em um projeto do mundo real. O projeto Resumate-NextJS no GitHub é um excelente exemplo de gerador de cartas de apresentação construído com Next.js.

Principais conclusões deste projeto:

1. Roteamento estruturado: O projeto usa uma estrutura de roteamento clara, separando preocupações entre diferentes páginas e componentes.

2. Renderização do lado do servidor: utiliza os recursos SSR do Next.js para melhorar o desempenho e SEO.

3. Rotas de API: implementa rotas de API para lógica do lado do servidor, demonstrando como lidar com envios de formulários e processamento de dados.

4. Estilo: usa Tailwind CSS para um design de interface de usuário responsivo e limpo.

5. Gerenciamento de estado: implementa API de contexto para gerenciar o estado do aplicativo entre componentes.

Conceitos Avançados

À medida que você se sentir mais confortável com o App Router, explore estes conceitos avançados:

1. Rotas paralelas: renderiza várias páginas no mesmo layout.
2. Interceptação de rotas: personalize o comportamento de roteamento para cenários específicos.
3. Route Handlers: Crie endpoints de API dentro da estrutura do App Router.
4. Middleware: adicione lógica personalizada do lado do servidor às suas rotas.

Melhores práticas e dicas

1. Aproveite os componentes do servidor: use-os para busca de dados e cálculos pesados.
2. Otimizar imagens: use o componente Next.js Image para otimização automática.
3. Implementar melhoria progressiva: certifique-se de que seu aplicativo funcione sem JavaScript para melhor acessibilidade.
4. Use TypeScript: para melhorar a experiência do desenvolvedor e a qualidade do código.
5. Atualizações regulares: mantenha sua versão do Next.js atualizada para se beneficiar dos recursos e otimizações mais recentes.

Conclusão

O Next.js 13 App Router representa um avanço significativo no desenvolvimento de aplicativos React. Ao fornecer um sistema de roteamento intuitivo baseado em sistema de arquivos e aproveitar o poder dos componentes do React Server, ele permite que os desenvolvedores criem aplicativos da web de alto desempenho, escaláveis ​​e de fácil manutenção.

Conforme demonstrado no exemplo do gerador de carta de apresentação, o App Router simplifica o processo de criação de aplicativos da web complexos e dinâmicos. Esteja você construindo um site de portfólio simples ou um aplicativo da web complexo, dominar o App Router aprimorará significativamente sua experiência de desenvolvimento em Next.js.

Lembre-se, a melhor maneira de aprender é fazendo. Clone o repositório Resumate-NextJS, experimente o código e tente implementar seus próprios recursos usando o App Router. Boa codificação!