🧩 Next.js 16 + Server Actions + API externa

Conectando com Axios

🎯 Objetivos da aula

  • Criar um projeto Next.js 16
  • Entender o conceito de Server Actions
  • Conectar-se a uma API REST existente de Tasks
  • Utilizar Axios para requisições HTTP
  • Exibir e manipular dados no front-end

🏗️ 1. Criando o projeto

npx create-next-app@latest next-tasks
cd next-tasks
npm install axios

Verifique se o Next.js está na versão 16:

npm list next

⚙️ 2. Habilitando Server Actions

No arquivo next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

export default nextConfig;

🌐 3. Configurando o Axios

Crie um arquivo lib/api.js:

import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://sua-api-de-tasks.com/api', // substitua pela URL da sua API
});

⚙️ 4. Criando Server Actions

No arquivo app/actions/tasks.js:

'use server';

import { api } from '@/lib/api';

export async function getTasks() {
  const { data } = await api.get('/tasks');
  return data;
}

export async function createTask(formData) {
  const title = formData.get('title');
  await api.post('/tasks', { title });
  return { success: true };
}

🧠 5. Usando Server Actions em um componente

Arquivo app/page.jsx:

import { getTasks, createTask } from './actions/tasks';

export default async function Home() {
  const tasks = await getTasks();

  async function handleSubmit(formData) {
    'use server';
    await createTask(formData);
  }

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">📝 Lista de Tarefas</h1>

      <form action={handleSubmit} className="my-4">
        <input
          name="title"
          placeholder="Nova tarefa"
          required
          className="border p-2"
        />
        <button
          type="submit"
          className="ml-2 bg-blue-500 text-white p-2 rounded"
        >
          Adicionar
        </button>
      </form>

      <ul className="mt-4">
        {tasks.map((t) => (
          <li key={t.id} className="border-b py-1">
            {t.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

⚙️ 6. Atualizando dados sem recarregar

Para atualizar a lista após criar uma task, use revalidatePath:

import { revalidatePath } from 'next/cache';

export async function createTask(formData) {
  const title = formData.get('title');
  await api.post('/tasks', { title });
  revalidatePath('/');
}

🧩 7. Lidando com erros

export async function getTasks() {
  try {
    const { data } = await api.get('/tasks');
    return data;
  } catch (error) {
    console.error('Erro ao buscar tarefas:', error);
    return [];
  }
}

🧰 8. Estrutura final do projeto

next-tasks/
 ├─ app/
 │   ├─ actions/
 │   │   └─ tasks.js
 │   └─ page.jsx
 ├─ lib/
 │   └─ api.js
 ├─ next.config.mjs
 ├─ package.json

🚀 Conclusão

  • Server Actions simplificam a comunicação com APIs
  • Axios facilita o consumo de endpoints REST
  • Integração limpa entre Next.js 16 e backend existente
  • Ideal para apps que precisam de SSR + interatividade

💡 Desafio para praticar

Implemente novas ações:

👏 Fim da Aula

Perguntas?