Frontend com Next.js: Setup e Integração Inicial

Agora que configuramos o WordPress como backend headless, é hora de começar o frontend moderno.

Vamos usar Next.js com TypeScript, ESLint, Tailwind CSS, App Router, Turbopack e src/ para criar um site rápido, escalável e integrado à REST API do WordPress.

📦 Setup Completo do Projeto

npx create-next-app meu-front-headless

Escolhemos as opções:
✅ Yes – TypeScript
✅ Yes – ESLint
✅ Yes – Tailwind CSS
✅ Yes – App Router
✅ Yes – src/ directory
✅ Yes – Turbopack
✅ No – Custom import alias

Rodamos o projeto com:

npm run dev

O navegador exibe a tela inicial do Next.js com Tailwind funcionando se você acessar o link.

📂 Estrutura inicial criada

meu-front-headless/
├── .next/
├── node_modules/
├── public/
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   └── page.tsx
│   ├── lib/
└── ...

🎨 Tailwind CSS já configurado

O arquivo src/app/globals.css já inclui o Tailwind e variáveis globais para tema:

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

/* ... tema claro/escuro ... */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

🌐 Integração Inicial com a REST API do WordPress

Vamos buscar os posts do WordPress usando a API REST no Next.js.

📚 1️⃣ Crie src/lib/api.ts:

const API_URL = 'https://seudominio.com/wp-json/wp/v2'; //Aqui é a URL do json, no meu caso http://localhost/wordpress/wp-json/wp/v2

export interface WPPost {
  id: number;
  title: { rendered: string };
  content: { rendered: string };
}

export async function fetchPosts(): Promise<WPPost[]> {
  const res = await fetch(`${API_URL}/posts`);
  if (!res.ok) throw new Error('Erro ao buscar posts');
  return res.json();
}

📚 2️⃣ Modifique src/app/page.tsx (Next.js App Router):

import { fetchPosts, WPPost } from '../lib/api';

export default async function Home() {
  const posts: WPPost[] = await fetchPosts();

  return (
    <main className="flex flex-col min-h-screen p-8">
      <h1 className="text-4xl font-bold mb-4">Posts do WordPress</h1>
      <ul className="list-disc list-inside">
        {posts.map(post => (
          <li key={post.id} className="mb-2">
            {post.title.rendered}
          </li>
        ))}
      </ul>
    </main>
  );
}

✅ O App Router usa Server Components e podemos usar await direto no componente.
✅ A lista de posts virá direto da REST API e será exibida na home.

⚠️ Observações:

• A URL da API (API_URL) deve apontar para seu WordPress real.
• Para ambientes diferentes (local, staging, prod), use variáveis .env.local.
• Garanta que o CORS e o HTTPS estejam configurados no WordPress (como vimos no post anterior).

🚀 Teste a Integração

✅ Rode o projeto com npm run dev.
✅ Acesse a home e veja a listagem de posts vindo da REST API do WordPress.

📌 Próximos passos

Nos próximos dias vamos:

• Criar rota dinâmica de post único com Next.js App Router.
• Integrar campos ACF e taxonomias.
• Implementar filtros e busca via API.
• Melhorar SEO e performance para produção.