Tudo o que você precisa saber sobre Next.JS para iniciar um novo projeto hoje

1. Introdução
2. O Projeto
3. Iniciando
4. Criando rotas
5. Organizando as rotas da plataforma
6. Controlando as Rotas do Projeto
7. Conclusão

Tudo o que você precisa saber sobre Next.JS para iniciar um novo projeto hoje

1 Introdução

Next.js é um poderoso framework React que vai além do desenvolvimento apenas de front-end. Enquanto o React normalmente se concentra em construir interfaces de usuário, o Next.js possibilita a criação de aplicações full-stack, lidando tanto com o front-end quanto com o back-end em um único framework unificado. Essa abordagem é frequentemente chamada de "Backend for Frontend" (BFF), permitindo criar aplicações completas e robustas com facilidade.

Links importantes:
Repositório no Github

2 O Projeto

O objetivo deste projeto é criar um site de eventos voltado para a venda de ingressos. A plataforma oferecerá ingressos para diversos tipos de eventos e contará com quatro páginas principais: a página de login, um feed de eventos, o processo de compra e a página de resumo do pedido. Abaixo, você encontrará imagens de pré-visualização de cada layout de página.

3 Iniciando

1. Instale o Node.JS 18.8 ou superior.
2. Criando o projeto:

npx create-next-app@latest

Em seguida, o terminal exibirá algumas perguntas:

// Este será o nome do seu projeto
What is your project named? eve

// **YES** - Usar typescript melhora a compreensão do código
Would you like to use TypeScript? No / Yes

// **YES** - Eslint ajuda a evitar erros 
Would you like to use ESLint? No / Yes

// **NO** - Neste projeto será usado styled-components
Would you like to use Tailwind CSS? No / Yes

// **YES**
Would you like your code inside a `src/` directory? No / Yes

// **YES**
Would you like to use App Router? (recommended) No / Yes

// **NO**
Would you like to use Turbopack for `next dev`?  No / Yes

// **NO**
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

1. Agora você pode rodar o comando abaixo para ver a página padrão do Next.js:

  npm run dev

Alternativamente, você pode usar este comando para construir a aplicação como páginas estáticas:

  npm run start

4 Criando rotas

O Next.js fornece uma maneira fácil de lidar com rotas na aplicação com base nos nomes dos caminhos. Vamos explorar cada caso.

1. Rotas comuns

• No diretório /src/app, procure o arquivo page.tsx. Esse será o arquivo exibido por padrão ao acessar http://localhost:3000.

• Agora, crie uma nova rota: no diretório src/app, crie uma pasta chamada auth. Dentro dela, crie o arquivo page.tsx e adicione o seguinte código:
  

export default function Auth() {
  return <div>login</div>;
}

Ao acessar http://localhost:3000/auth, você verá o texto "login".

2 - Agrupamento de rotas

Para organizar o código sem impactar a estrutura das URLs, renomeie a pasta auth para (auth) e crie um subdiretório login, mova o arquivo page.tsx para ela.

Agora, verifique duas coisas:

• a URL /auth exibirá um erro 404.
• a URL /login exibirá o componente corretamente.

Essa abordagem organiza o projeto em módulos sem afetar a experiência do usuário.

4 - Rotas dinâmicas

Crie uma rota dinâmica, ideal para páginas que precisam exibir conteúdo variável, como detalhes de um evento.

No diretório /app, crie uma pasta events e, dentro dela, outra chamada [id]. O nome com colchetes indica uma rota dinâmica.

No arquivo page.tsx dentro da pasta [id], adicione:

// O comando 'use client' é uma diretiva usada no Next.js para indicar que um arquivo ou componente deve ser executado no lado do cliente.
'use client' 

import { useParams } from "next/navigation";

export default function EventInfo() {
    const params = useParams(); // Retrieve URL parameters

    return <div>{params.id}</div>;
  }

Acesse http://localhost:3000/events/111 para visualizar a página.

5 Organizando as rotas da plataforma

Instalando dependências:

npm i styled-components react-query 

Criando rotas de autenticação e plataforma

• Autenticação: Crie um diretório (auth) com subdiretórios login e register.
• Plataforma: No diretório app, crie uma pasta platform com subdiretórios [id] e purchase.

Rotas privadas da plataforma

Dentro da pasta app crie uma pasta chamada 'platform', em seguida crie as seguintes sub pastas:

• [id]
• purchase

A estrutura das pastas deve parecer com isso:

Nesse momento, iremos criar pastas genéricas, pois este arquivo foca no funcionamento do Next.js.

6 Controlando as Rotas do Projeto - Middlewares

No nosso projeto haverá rotas públicas e privadas, para controlar esse acesso utilizaremos o middleware

O que é um Middleware?

Middleware é uma função executada a cada solicitação de página. Isso permite gerenciar as rotas, autenticação e outras regras. Para isso:

1. Crie um arquivo chamado middleware.ts na pasta src.
2. Adicione o seguinte código:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export default function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

3. Adicionando regras às rotas.

No mesmo arquivo, adicione dois arrays para categorizar dois tipos de rotas - públicas e privadas.

// Rotas privadas - necessita de autenticação
const protectedRoutes = ["/platform"];

// Rotas públicas - não necessita de autenticação
const publicRoutes = ["/login", "/register"];

1. Verificando as regras da rota e a sessão do usuário

Atualize a função do middleware para incluir as validações das rotas e checar a sessão:

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl; // URL being accessed
  const userId = request.cookies.get("user-id"); // User session check

  // Função que  verifica se a rota é privada
  const isPrivateRouter = protectedRoutes.some((path: string) =>
    pathname.startsWith(path)
  );

  if (isPrivateRouter && userId) {
    return NextResponse.next();
  }

  if (isPrivateRouter && !userId) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // Função que  verifica se a rota é pública
  const isPublicRouter = publicRoutes.some((path: string) =>
    pathname.startsWith(path)
  );

  if (isPublicRouter && !userId) {
    return NextResponse.next();
  }

  if (isPublicRouter && userId) {
    return NextResponse.redirect(new URL("/platform", request.url));
  }

  // Redireciona para o login se a rota for inválida
  return NextResponse.redirect(new URL("/login", request.url));
}

5. Pular execução do middleware em rotas específicas

Se você não quer que o middleware execute em algumas rotas, no mesmo arquivo deve adicionar o seguinte código no arquivo middleware.ts:

export const config = {
  matcher: ['/login'], // não será executada na rota /login
}

7 Navegando entre rotas

Antes de seguir, desabilite o middleware.

Utilizando Next.js para navegar

Next.js permite duas formas para navegação.

Utilizando Link

Para navegação por links, use o componente Link do Next.js em vez da tag <a> padrão do HTML. Isso evita o recarregamento completo da página, proporcionando um melhor desempenho e uma experiência de usuário mais suave.

Exemplo: Crie um botão na página de login para navegar até a plataforma.

Ao clicar no botão, a navegação causará o recarregamento da página.

Então, vamos tentar usar o componente do Next.js.

Ao clicar no botão, a navegação ocorrerá sem recarregar a página inteira.

Usando o Hook do Router

Como alternativa, você pode usar o hook router do Next.js para navegação programática.

Essa abordagem também garante transições suaves e cria a sensação de uma aplicação de página única (SPA).

Com esses métodos, você pode oferecer uma experiência de navegação fluida para os usuários.

7 Conclusão

Neste artigo, exploramos os principais recursos do Next.js, incluindo os fundamentos de roteamento, criação de páginas dinâmicas e aninhadas, organização de código com grupos de rotas e implementação de autenticação e controle de acesso usando middleware. Além disso, aprendemos a otimizar a navegação para uma melhor experiência do usuário, aproveitando o componente Link e o roteamento programático com o hook useRouter. Esses conceitos estabelecem uma base sólida para a criação de aplicações escaláveis e amigáveis ao usuário com Next.js.