Logo

Publicado

- 3 min read

Começando com Next.js 15: Guia Completo para Iniciantes

React NextJS Javascript
img of Começando com Next.js 15: Guia Completo para Iniciantes

Introdução

O Next.js 15 é uma poderosa estrutura de desenvolvimento baseada em React que facilita a criação de aplicações web modernas, escaláveis e rápidas. Ele traz recursos como renderização híbrida (estática e SSR), roteamento automático, API routes e muito mais — tudo pronto para ser usado com uma configuração mínima.

Neste guia, você aprenderá o básico do Next.js 15, entenderá como ele funciona por baixo dos panos e construirá uma aplicação simples para colocar seus conhecimentos em prática.

Pré-requisitos

Antes de começar, é importante que você tenha:

  • Conhecimentos básicos em JavaScript
  • Noções de React (hooks, componentes e props)
  • Node.js e npm instalados na sua máquina (use node -v e npm -v para verificar)

Conceitos Fundamentais do Next.js 15

1. Estrutura de pastas com App Router

O Next.js 15 usa o sistema de roteamento baseado em pastas chamado App Router, localizado dentro do diretório app/.

   my-app/
├── app/
│   ├── page.tsx       # Página principal ("/")
│   └── layout.tsx     # Layout compartilhado
├── public/            # Arquivos estáticos
├── styles/            # Estilos globais
├── next.config.js     # Configurações do Next.js
└── package.json

2. Criando uma página

Qualquer arquivo page.tsx dentro de app/ representa uma rota:

   // app/page.tsx
export default function Home() {
	return <h1>Bem-vindo ao Next.js 15!</h1>
}

3. Layouts e navegação

Você pode criar layouts reutilizáveis com o arquivo layout.tsx:

   // app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html>
			<body>
				<header>Meu Header</header>
				<main>{children}</main>
			</body>
		</html>
	)
}
   import Link from 'next/link'
;<Link href='/sobre'>Ir para Sobre</Link>

Mini-projeto: Criando um Portfólio Pessoal

Vamos construir um site simples de portfólio com duas páginas: Home e Sobre.

1. Crie o projeto

   npx create-next-app@latest meu-portfolio --app
cd meu-portfolio
npm run dev

2. Crie as páginas

   // app/page.tsx
export default function Home() {
	return (
		<div>
			<h1>Olá, eu sou o João!</h1>
			<p>Desenvolvedor Frontend apaixonado por React e Next.js.</p>
		</div>
	)
}
   // app/sobre/page.tsx
export default function Sobre() {
	return (
		<div>
			<h1>Sobre Mim</h1>
			<p>Tenho 3 anos de experiência com desenvolvimento web...</p>
		</div>
	)
}

3. Adicione navegação

   // app/layout.tsx
import Link from 'next/link'

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html>
			<body>
				<nav>
					<Link href='/'>Home</Link> | <Link href='/sobre'>Sobre</Link>
				</nav>
				{children}
			</body>
		</html>
	)
}

Próximos passos

Após finalizar esse mini-projeto, você pode:

  • Estudar sobre fetch de dados com fetch() e APIs do Next.js
  • Integrar com banco de dados via Prisma ou Supabase
  • Explorar rotas dinâmicas e parâmetros de URL
  • Criar componentes com bibliotecas como ShadCN UI ou Tailwind CSS

Materiais de Apoio

Se você chegou até aqui, parabéns! 🎉 Agora você já tem uma base sólida para criar projetos incríveis com Next.js 15.