WPGraphQL + Next.js App Router — implementacja headless WordPress krok po kroku

# W WordPress — zainstaluj pluginy:
# 1. WPGraphQL (wp-graphql)
# 2. WPGraphQL for ACF (opcjonalnie, jeśli używasz ACF)

// lib/wordpress.ts
const WORDPRESS_API_URL = process.env.WORDPRESS_API_URL!;
 
interface GraphQLResponse<T> {
  data: T;
  errors?: { message: string }[];
}
 
export async function fetchGraphQL<T>(
  query: string,
  variables?: Record<string, unknown>
): Promise<T> {
  const res = await fetch(WORDPRESS_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      ...(process.env.WORDPRESS_AUTH_TOKEN && {
        Authorization: `Bearer ${process.env.WORDPRESS_AUTH_TOKEN}`,
      }),
    },
    body: JSON.stringify({ query, variables }),
    next: { revalidate: 3600 }, // ISR — odśwież co godzinę
  });
 
  const json: GraphQLResponse<T> = await res.json();
 
  if (json.errors) {
    throw new Error(json.errors.map((e) => e.message).join(', '));
  }
 
  return json.data;
}

// lib/queries/posts.ts
import { fetchGraphQL } from '../wordpress';
 
interface WPPost {
  id: string;
  title: string;
  slug: string;
  excerpt: string;
  date: string;
  content: string;
  featuredImage: {
    node: {
      sourceUrl: string;
      altText: string;
    };
  } | null;
  categories: {
    nodes: { name: string; slug: string }[];
  };
  seo: {
    title: string;
    metaDesc: string;
    opengraphImage: { sourceUrl: string } | null;
  };
}
 
export async function getPosts(first = 20): Promise<WPPost[]> {
  const data = await fetchGraphQL<{ posts: { nodes: WPPost[] } }>(`
    query GetPosts($first: Int!) {
      posts(first: $first, where: { status: PUBLISH }) {
        nodes {
          id
          title
          slug
          excerpt
          date
          featuredImage {
            node {
              sourceUrl
              altText
            }
          }
          categories {
            nodes {
              name
              slug
            }
          }
        }
      }
    }
  `, { first });
 
  return data.posts.nodes;
}
 
export async function getPostBySlug(slug: string): Promise<WPPost | null> {
  const data = await fetchGraphQL<{ post: WPPost | null }>(`
    query GetPost($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        id
        title
        slug
        content
        date
        featuredImage {
          node {
            sourceUrl
            altText
          }
        }
        categories {
          nodes {
            name
            slug
          }
        }
      }
    }
  `, { slug });
 
  return data.post;
}
 
export async function getAllPostSlugs(): Promise<string[]> {
  const data = await fetchGraphQL<{ posts: { nodes: { slug: string }[] } }>(`
    query GetAllSlugs {
      posts(first: 1000, where: { status: PUBLISH }) {
        nodes {
          slug
        }
      }
    }
  `);
 
  return data.posts.nodes.map((p) => p.slug);
}

// app/blog/page.tsx
import { getPosts } from '@/lib/queries/posts';
import Image from 'next/image';
import Link from 'next/link';
 
export const revalidate = 3600;
 
export default async function BlogPage() {
  const posts = await getPosts();
 
  return (
    <main className="max-w-4xl mx-auto py-12">
      <h1 className="text-3xl font-bold mb-8">Blog</h1>
      <div className="space-y-8">
        {posts.map((post) => (
          <Link key={post.id} href={`/blog/${post.slug}`} className="block group">
            <article className="flex gap-6">
              {post.featuredImage && (
                <Image
                  src={post.featuredImage.node.sourceUrl}
                  alt={post.featuredImage.node.altText || post.title}
                  width={300}
                  height={200}
                  className="rounded-lg object-cover"
                />
              )}
              <div>
                <h2 className="text-xl font-semibold group-hover:text-blue-600">
                  {post.title}
                </h2>
                <div
                  className="text-gray-600 mt-2 line-clamp-2"
                  dangerouslySetInnerHTML={{ __html: post.excerpt }}
                />
                <time className="text-sm text-gray-400 mt-2 block">
                  {new Date(post.date).toLocaleDateString('pl-PL')}
                </time>
              </div>
            </article>
          </Link>
        ))}
      </div>
    </main>
  );
}

// app/blog/[slug]/page.tsx
import { getPostBySlug, getAllPostSlugs } from '@/lib/queries/posts';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
 
export const revalidate = 3600;
 
export async function generateStaticParams() {
  const slugs = await getAllPostSlugs();
  return slugs.map((slug) => ({ slug }));
}
 
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) return {};
 
  return {
    title: post.title,
    description: post.excerpt?.replace(/<[^>]*>/g, '').slice(0, 160),
  };
}
 
export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) notFound();
 
  return (
    <article className="max-w-3xl mx-auto py-12 prose prose-lg">
      <h1>{post.title}</h1>
      <time className="text-gray-400">{new Date(post.date).toLocaleDateString('pl-PL')}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';
 
export async function POST(req: Request) {
  const secret = req.headers.get('x-webhook-secret');
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }
 
  const body = await req.json();
 
  if (body.post_type === 'post') {
    revalidatePath('/blog');
    if (body.post_name) revalidatePath(`/blog/${body.post_name}`);
  }
 
  return NextResponse.json({ revalidated: true });
}

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'twoj-wordpress.pl',
      },
      {
        protocol: 'https',
        hostname: '**.wp.com', // Jeśli używasz WordPress.com CDN
      },
    ],
  },
};