Arquivos Essenciais do Next.js

1. layout.js

O que faz: Define o visual padrão (menu, rodapé, etc) para todas as páginas dentro da pasta.

// app/layout.js
export default function Layout({ children }) {
  return (
    <div>
      <header>Meu Blog</header>
      <main>{children}</main>
      <footer>© 2025 Anna</footer>
    </div>
  );
}

Todas as páginas vão ter esse cabeçalho e rodapé.

2. page.js

O que faz: É a página principal de uma rota.

// app/page.js
export default function HomePage() {
  return <h1>Bem-vinda ao blog!</h1>;
}

Aparece quando você acessa ‎⁠/⁠.

3. loading.js

O que faz: Mostra uma tela de carregamento enquanto os dados da página estão sendo buscados.

// app/blog/loading.js
export default function Loading() {
  return <p>Carregando posts...</p>;
}

Aparece enquanto os posts do blog estão sendo carregados.

4. not-found.js

O que faz: Mostra uma mensagem personalizada quando a página não existe.

// app/blog/not-found.js
export default function NotFound() {
  return <h2>Página não encontrada!</h2>;
}

Aparece se alguém acessar uma rota inválida, tipo ‎⁠/blog/abcxyz⁠.

5. error.js

O que faz: Mostra uma mensagem de erro se algo der errado na página.

// app/blog/error.js
export default function Error({ error }) {
  return <div>Ocorreu um erro: {error.message}</div>;
}

Aparece se houver erro ao carregar os posts.

6. global-error.js

O que faz: Mostra um erro para o app inteiro, não só para uma página.

// app/global-error.js
export default function GlobalError({ error }) {
  return <div>Erro geral: {error.message}</div>;
}

Aparece se algo grave acontecer no app.

7. route.js

O que faz: Cria um endpoint de API.

// app/api/posts/route.js
export async function GET() {
  return Response.json([{ id: 1, title: "Primeiro post" }]);
}

Se você acessar ‎⁠/api/posts⁠, recebe os dados dos posts.

8. template.js

O que faz: Permite que o layout seja re-renderizado toda vez que a rota muda.

// app/blog/template.js
export default function BlogTemplate({ children }) {
  return <section>{children}</section>;
}

Usado quando você quer que o layout seja reiniciado ao navegar entre posts.

9. default.js

O que faz: Mostra uma página padrão quando nenhuma rota paralela está ativa.

// app/(admin)/default.js
export default function DefaultAdmin() {
  return <p>Selecione uma opção do menu.</p>;
}

Aparece quando nenhuma página do admin está aberta.

Se quiser exemplos para um caso específico (tipo e-commerce, portfólio, etc), só pedir!

Exemplos

Estrutura de pastas

app/
  layout.js
  page.js
  loading.js
  not-found.js
  error.js
  blog/
    page.js
    loading.js
    not-found.js
    error.js
    [slug]/
      page.js
      loading.js
      not-found.js
      error.js
  api/
    posts/
      route.js

Exemplos de código

1. layout.js

Layout padrão do blog (cabeçalho, rodapé):

// app/layout.js
export default function Layout({ children }) {
  return (
    <div>
      <header>
        <h1>Blog da Anna</h1>
        <nav>
          <a href="/">Home</a> | <a href="/blog">Posts</a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>© 2025 Anna Silva</footer>
    </div>
  );
}

2. page.js

Página inicial do blog:

// app/page.js
export default function HomePage() {
  return (
    <section>
      <h2>Bem-vinda ao Blog!</h2>
      <p>Veja os últimos posts em <a href="/blog">/blog</a></p>
    </section>
  );
}

3. loading.js

Tela de carregamento global:

// app/loading.js
export default function Loading() {
  return <p>Carregando conteúdo...</p>;
}

4. not-found.js

Página 404 global:

// app/not-found.js
export default function NotFound() {
  return <h2>Página não encontrada!</h2>;
}

5. error.js

Erro global:

// app/error.js
export default function Error({ error }) {
  return <div>Ocorreu um erro: {error.message}</div>;
}

6. blog/page.js

Lista de posts do blog:

// app/blog/page.js
export default function BlogPage() {
  // Exemplo estático
  const posts = [
    { slug: "primeiro-post", title: "Primeiro Post" },
    { slug: "segundo-post", title: "Segundo Post" },
  ];
  
  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

7. blog/[slug]/page.js

Página de um post individual:

// app/blog/[slug]/page.js
export default function PostPage({ params }) {
  // Exemplo estático
  const post = { title: "Primeiro Post", content: "Conteúdo do post..." };
  
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </article>
  );
}

8. blog/loading.js

Carregando posts do blog:

// app/blog/loading.js
export default function BlogLoading() {
  return <p>Carregando posts...</p>;
}

9. blog/not-found.js

Post não encontrado:

// app/blog/not-found.js
export default function BlogNotFound() {
  return <h2>Post não encontrado!</h2>;
}

10. blog/error.js

Erro ao carregar posts:

// app/blog/error.js
export default function BlogError({ error }) {
  return <div>Erro ao carregar posts: {error.message}</div>;
}

11. api/posts/route.js

Endpoint de API para listar posts:

// app/api/posts/route.js
export async function GET() {
  return Response.json([
    { slug: "primeiro-post", title: "Primeiro Post" },
    { slug: "segundo-post", title: "Segundo Post" },
  ]);
}

Se quiser ver como ficaria a navegação ou adicionar comentários, só pedir!