giuseppe-trisciuoglio/nextjs-app-router

O que nextjs-app-router faz?

Fornece padrões e exemplos de código para construir aplicações Next.js 16+ com a arquitetura App Router. Use ao criar projetos com App Router, implementar Server Components e Client Components ("use client"), criar Server Actions para formulários, construir Route Handlers (route.ts), configurar caching com a diretiva "use cache" (cacheLife, cacheTag), configurar rotas paralelas (@slot) ou de interceptação, migrar para proxy.ts, ou trabalhar com convenções de arquivos do App Router (layout.tsx, page.tsx, loading.tsx, error.tsx).

Como usar

Esta skill é ativada automaticamente quando você trabalha em projetos que utilizam a arquitetura App Router do Next.js. Você pode invocá-la a qualquer momento mencionando o nome da skill ou pedindo ajuda com:

• Criação de Server Components
• Criação de Client Components com a diretiva "use client"
• Implementação de Server Actions para formulários
• Construção de Route Handlers em route.ts
• Configuração de caching com "use cache", cacheLife e cacheTag
• Roteamento paralelo com @slot
• Roteamento de interceptação
• Migração para proxy.ts
• Convenções de arquivos: layout.tsx, page.tsx, loading.tsx, error.tsx

Exemplos

Server Components (padrão)

// app/page.tsx - Server Component (padrão)
export default async function HomePage() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Client Components

"use client";
// app/components/Button.tsx
import { useState } from "react";

export default function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Cliques: {count}</button>;
}

Server Actions

// app/actions.ts
"use server";

export async function submitForm(formData: FormData) {
  const name = formData.get("name");
  // Processar no servidor
  console.log(`Recebido: ${name}`);
}

Route Handler

// app/api/hello/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Olá do Next.js!" });
}

Cache com use cache

import { cacheLife, cacheTag } from "next/cache";

export default async function Page() {
  const data = await fetchData("use cache");
  cacheLife("days");
  cacheTag("my-data");
  return <div>{data}</div>;
}

Rotas Paralelas

app/
  @analytics/
    page.tsx
  @dashboard/
    page.tsx
  layout.tsx

Layout com slots

// app/layout.tsx
export default function Layout({
  children,
  analytics,
  dashboard,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  dashboard: React.ReactNode;
}) {
  return (
    <>
      {children}
      {analytics}
      {dashboard}
    </>
  );
}

Migração para proxy.ts

Para usar o novo arquivo proxy.ts (versão 16+), crie na raiz do projeto:

// proxy.ts
import { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  // Lógica de proxy
}

Convenções de Arquivos

• layout.tsx - Layout compartilhado para rotas aninhadas
• page.tsx - Página principal da rota
• loading.tsx - UI de carregamento (integrado com Suspense)
• error.tsx - UI de erro (usando Error Boundaries)
• not-found.tsx - UI para rota não encontrada (opcional)

Recursos Adicionais

• Documentação Next.js App Router
• Server Components
• Server Actions
• Cache (use cache)
• Rotas Paralelas