Tipar Fetch no Next.js com TypeScript

// lib/api.ts

// Tipo de erro padronizado
type ApiError = {
  message: string;
  status: number;
};

// Tipo de resultado genérico
type ApiResult<T> =
  | { data: T; error: null }
  | { data: null; error: ApiError };

// Options estendidas do Next.js
type FetchOptions = RequestInit & {
  next?: {
    revalidate?: number | false;
    tags?: string[];
  };
};

const BASE_URL = process.env.API_URL ?? "https://api.example.com";

export async function api<T>(
  endpoint: string,
  options: FetchOptions = {}
): Promise<ApiResult<T>> {
  try {
    const response = await fetch(`${BASE_URL}${endpoint}`, {
      headers: {
        "Content-Type": "application/json",
        ...options.headers,
      },
      ...options,
    });

    if (!response.ok) {
      return {
        data: null,
        error: {
          message: `API error: ${response.statusText}`,
          status: response.status,
        },
      };
    }

    const data: T = await response.json();
    return { data, error: null };
  } catch (err) {
    return {
      data: null,
      error: { message: "Network error", status: 0 },
    };
  }
}

// types/api.ts

export type Post = {
  id: string;
  title: string;
  content: string;
  slug: string;
  author: Author;
  tags: string[];
  publishedAt: string;
  updatedAt: string;
};

export type Author = {
  id: string;
  name: string;
  avatar: string;
};

export type PaginatedResponse<T> = {
  data: T[];
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
};

export type PostFilters = {
  category?: string;
  tag?: string;
  page?: number;
  limit?: number;
};

// app/blog/page.tsx
import { api } from "@/lib/api";
import type { Post, PaginatedResponse } from "@/types/api";

export default async function BlogPage() {
  // Fetch tipado com cache de 1 hora e tag pra invalidação
  const result = await api<PaginatedResponse<Post>>("/posts", {
    next: {
      revalidate: 3600,
      tags: ["posts"],
    },
  });

  if (result.error) {
    return <p>Erro: {result.error.message}</p>;
  }

  // result.data tem tipo PaginatedResponse<Post>
  const { data: posts, totalPages } = result.data;

  return (
    <div>
      {posts.map((post) => (
        // post tem autocomplete completo: title, slug, author...
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>Por {post.author.name}</p>
        </article>
      ))}
    </div>
  );
}

// lib/api.ts - versão com query params

function buildQuery(params: Record<string, string | number | undefined>): string {
  const filtered = Object.entries(params)
    .filter(([_, v]) => v !== undefined)
    .map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`);

  return filtered.length ? `?${filtered.join("&")}` : "";
}

// Funções específicas por recurso
export async function getPosts(
  filters: PostFilters = {}
): Promise<ApiResult<PaginatedResponse<Post>>> {
  const query = buildQuery({
    category: filters.category,
    tag: filters.tag,
    page: filters.page,
    limit: filters.limit,
  });

  return api<PaginatedResponse<Post>>(`/posts${query}`, {
    next: { revalidate: 3600, tags: ["posts"] },
  });
}

export async function getPost(
  slug: string
): Promise<ApiResult<Post>> {
  return api<Post>(`/posts/${slug}`, {
    next: { revalidate: 3600, tags: ["posts", `post-${slug}`] },
  });
}

// Uso limpo no componente:
// const { data: posts } = await getPosts({ category: "react", page: 1 });
// const { data: post } = await getPost("meu-slug");

// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

// Tags tipadas como union literal
type CacheTag = "posts" | "products" | "users" | `post-${string}`;

type RevalidateBody = {
  tag: CacheTag;
  secret: string;
};

export async function POST(request: NextRequest) {
  const body: RevalidateBody = await request.json();

  if (body.secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // revalidateTag invalida todas as requests com essa tag
  revalidateTag(body.tag);

  return NextResponse.json({
    revalidated: true,
    tag: body.tag,
    now: Date.now(),
  });
}

// Chamada externa:
// POST /api/revalidate { tag: "posts", secret: "xyz" }
// Todos os fetches com tag "posts" são invalidados

// components/SearchResults.tsx
"use client";

import useSWR from "swr";
import type { Post } from "@/types/api";

// Fetcher tipado pra SWR
const fetcher = async <T,>(url: string): Promise<T> => {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Fetch failed");
  return res.json() as Promise<T>;
};

type SearchResultsProps = {
  query: string;
};

export function SearchResults({ query }: SearchResultsProps) {
  // SWR com generics: data tem tipo Post[]
  const { data, error, isLoading } = useSWR<Post[]>(
    query ? `/api/search?q=${query}` : null,
    fetcher<Post[]>
  );

  if (isLoading) return <p>Buscando...</p>;
  if (error) return <p>Erro na busca</p>;
  if (!data?.length) return <p>Nenhum resultado</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}