DEV Community

Lay
Lay

Posted on

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.
Enter fullscreen mode Exit fullscreen mode

3 Iniciando

  1. Instale o Node.JS 18.8 ou superior.
  2. Criando o projeto:
npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

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? @/*

Enter fullscreen mode Exit fullscreen mode
  1. Agora você pode rodar o comando abaixo para ver a página padrão do Next.js:
  npm run dev
Enter fullscreen mode Exit fullscreen mode

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

  npm run start
Enter fullscreen mode Exit fullscreen mode

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>;
}

Enter fullscreen mode Exit fullscreen mode

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

Image description

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>;
  }

Enter fullscreen mode Exit fullscreen mode

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

Image description

5 Organizando as rotas da plataforma

Instalando dependências:

npm i styled-components react-query 

Enter fullscreen mode Exit fullscreen mode

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.

Image description

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:

Image description

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))
}

Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode
  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));
}

Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

7 Navegando entre rotas

Antes de seguir, desabilite o middleware.
Image description

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.

Image description

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

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

Image description

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.

Image description

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.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay