0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Aula

Fundamentos do roteamento pelo sistema de arquivos

Compreenda os conceitos fundamentais do roteamento baseado no sistema de arquivos em Next.js e como criar páginas e rotas básicas.

Fundamentos do roteamento pelo sistema de arquivos é uma aula grátis de Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack (App Router + Server Actions), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Intro to File-System Routing

Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.

The Core `app` Directory

Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.

Creating a Root Page

A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.

Hello Next.js Homepage!

Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js homepage.</p>
    </div>
  );
}

Folders for Nested Paths

Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.

The Dashboard Page

This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.

export default function DashboardPage() {
  return (
    <div>
      <h1>Your Dashboard</h1>
      <p>Here you'll find all your important stats.</p>
    </div>
  );
}

Deeper Nested Routes

Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.

Shared UI with `layout.js`

A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.

Route Mapping Quiz

Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?

File-System Routing Recap

Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.

Perguntas Frequentes

A aula “Fundamentos do roteamento pelo sistema de arquivos” é grátis?

Sim — o texto completo de “Fundamentos do roteamento pelo sistema de arquivos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack (App Router + Server Actions), atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.

O que vou aprender em “Fundamentos do roteamento pelo sistema de arquivos”?

Compreenda os conceitos fundamentais do roteamento baseado no sistema de arquivos em Next.js e como criar páginas e rotas básicas. Você pratica Next.js 15 Fullstack (App Router + Server Actions) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Next.js 15 Fullstack (App Router + Server Actions)?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Fundamentos do roteamento pelo sistema de arquivos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Next.js 15 Fullstack (App Router + Server Actions)?

Sim. Cada aula de Next.js 15 Fullstack (App Router + Server Actions) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do projeto e CLI
  2. Fundamentos do roteamento pelo sistema de arquivos
  3. Visão geral de páginas e layouts
  4. Estilizando sua Aplicação Next.js
← Voltar para Next.js 15 Fullstack (App Router + Server Actions)