Aggiungi un blog senza testa a Next.js in 20 minuti con NextPress

20 minuti. Cinque file. A create-next-app progetto tira messaggi da un’installazione di WordPress su WPGraphQL, l’editor possiede ancora ogni paragrafo, e next build navi pagine statiche con revalidate a qualsiasi numero tu voglia. Il passaggio sotto i punti woographqldemo.wpengine.com — lo scambio nel proprio dominio alla fine e si applicano le stesse sei fasi.

Cosa c’è nella scatola

@axistaylor/nextpress è un pacchetto npm e circa 6.000 linee di TypeScript. Porta tre pezzi in un Next.js 16 app:

withWCR — NextConfig wrapper che imposta il dominio WP reverse-proxy e forward /wp-content♪ /wp-admine /graphql attraverso il prossimo runtime.
<Content> — un componente React che prende il raw HTML WordPress restituisce e lo rende come nodi reali React, più il CSS per blocco ogni uno ha bisogno.
nextImageParser — un parser che scambia ogni <img> in contenuto WP per un next/image con width♪ heighte sizes estratto dagli attributi del blocco.

Backend requisito: WordPress con WPGraphQL attivo. Qualsiasi host funziona — WP Engine, Pantheon, Bluehost, un VPS autogestito — fino a quando /graphql risponde.

Passo 1 — Bootstrap l’app successiva

Stock create-next-app con il modello TypeScript, quindi aggiungere @axistaylor/nextpress dalle npm:

npx create-next-app@latest nextpress-quickstart
cd nextpress-quickstart
npm install @axistaylor/nextpress

Fase 2 — `next.config.ts`

withWCR prende tre argomenti: la base Next config, l’origine WordPress, e l’origine frontend pubblico-facciante. L’involucro riscrive ogni URL WordPress assoluto che l’editor ha scritto in un percorso di frontend-relative in modo da link all’interno reso contenuto post atterrare sulle tue Prossime rotte.

import type { NextConfig } from "next";
import { withWCR } from "@axistaylor/nextpress/withWCR";

const wpDomain = "woographqldemo.wpengine.com";
const wpProtocol = "https";

const nextConfig: NextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [{ protocol: "https", hostname: wpDomain }],
  },
  env: {
    GRAPHQL_ENDPOINT: `${wpProtocol}://${wpDomain}/graphql`,
  },
};

export default withWCR(
  nextConfig,
  {
    wpDomain,
    wpProtocol,
    wpHomeUrl: `${wpProtocol}://${wpDomain}`,
    wpSiteUrl: `${wpProtocol}://${wpDomain}`,
  },
  {
    frontendDomain: "localhost:3000",
    frontendProtocol: "http",
  },
);

Fase 3 — `src/proxy.ts`

Il prossimo 16 rinominato middleware.ts a proxy.ts; il ruolo e il comportamento del matcher non sono cambiati. Il gestore fa due cose — avanti il /wp-* percorsi attraverso proxyByWCR così il browser non tocca mai l’origine WordPress, e impostare un x-uri intestazione su ogni richiesta non prevista in modo che i componenti del server a valle sappiano quale URI chiedere il backend per script e fogli di stile inqueued:

import { NextResponse, NextRequest } from "next/server";
import { proxyByWCR, isProxiedRoute } from "@axistaylor/nextpress/proxyByWCR";

export const proxy = async (request: NextRequest) => {
  const pathname = request.nextUrl.pathname;

  if (isProxiedRoute(pathname)) {
    return proxyByWCR(request);
  }

  const headers = new Headers(request.headers);
  headers.set("x-uri", pathname);
  return NextResponse.next({ request: { headers } });
};

export const config = {
  matcher: [
    "/atx/:instance/proxiee",
    "/atx/:instance/wp",
    "/atx/:instance/wc",
    "/atx/:instance/wp-internal-assets/:path*",
    "/atx/:instance/wp-assets/:path*",
    "/atx/:instance/wp-json/:path*",
    "/((?!_next|api|favicon.ico|sw.js|.*\\.).*)",
  ],
};

Fase 4 — `src/lib/wp.ts`

Tre funzioni asincroni, una condivisa fetch Involucro. fetchPosts alimenta la pagina dell’indice, fetchPostBySlug alimenta la pagina post, fetchPostSlugs drive generateStaticParams. next: { revalidate: 60 } suggerimento sul fetch è l’unico controllo della cache di cui hai bisogno — Prossimo gestisce il resto:

const ENDPOINT = process.env.GRAPHQL_ENDPOINT!;

async function gql<T>(query: string, variables: Record<string, unknown> = {}): Promise<T> {
  const res = await fetch(ENDPOINT, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query, variables }),
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error(`WPGraphQL ${res.status}`);
  const { data, errors } = await res.json();
  if (errors?.length) throw new Error(errors[0].message);
  return data as T;
}

export interface PostSummary {
  slug: string;
  title: string;
  date: string;
  excerpt: string | null;
  featuredImage: { sourceUrl: string; altText: string } | null;
}

export interface Post extends PostSummary {
  content: string;
  contentCssClasses: string;
}

export async function fetchPosts(first = 20): Promise<PostSummary[]> {
  const data = await gql<{ posts: { nodes: PostSummary[] } }>(`
    query Posts($first: Int!) {
      posts(first: $first, where: { status: PUBLISH, orderby: { field: DATE, order: DESC } }) {
        nodes {
          slug title date excerpt
          featuredImage { node { sourceUrl altText } }
        }
      }
    }`, { first });
  return data.posts.nodes;
}

export async function fetchPostSlugs(): Promise<string[]> {
  const data = await gql<{ posts: { nodes: { slug: string }[] } }>(`
    { posts(first: 100, where: { status: PUBLISH }) { nodes { slug } } }`);
  return data.posts.nodes.map(n => n.slug);
}

export async function fetchPostBySlug(slug: string): Promise<Post | null> {
  const data = await gql<{ post: Post | null }>(`
    query Post($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        slug title date excerpt
        content(format: RENDERED)
        contentCssClasses
        featuredImage { node { sourceUrl altText } }
      }
    }`, { slug });
  return data.post;
}

Fase 5 — `/blog` indice

Un componente server, uno await, nessun gancio cliente. Il post array è solo JSX:

import Link from "next/link";
import { fetchPosts } from "@/lib/wp";

export const metadata = { title: "Blog" };

export default async function BlogIndex() {
  const posts = await fetchPosts(20);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
          <time>{new Date(post.date).toLocaleDateString()}</time>
        </li>
      ))}
    </ul>
  );
}

Fase 6 — `/blog/[slug]`

generateStaticParams trasforma ogni slug pubblicato in un percorso di tempo di costruzione. Il rendering è due linee: una voce e una <Content>.

import { notFound } from "next/navigation";
import { Content, nextImageParser } from "@axistaylor/nextpress";
import { fetchPostBySlug, fetchPostSlugs } from "@/lib/wp";

export async function generateStaticParams() {
  const slugs = await fetchPostSlugs();
  return slugs.map((slug) => ({ slug }));
}

export default async function PostPage({ params }: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await fetchPostBySlug(slug);
  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <Content
        content={post.content}
        contentCssClasses={post.contentCssClasses}
        parsers={[nextImageParser()]}
      />
    </article>
  );
}

Cinque file, due domini, uno npx. L’editor non si muove mai; lo strato di consegna cambia sotto di esso.

Cosa? `<Content>` fa per te

Il corpo post è una stringa di WordPress blocco HTML. Passarlo in un dangerouslySetInnerHTML lo renderebbe, ma perderesti tre cose. <Content> li gestisce:

Parses l’HTML in un albero React. Ogni <p>♪ <figure>♪ <blockquote> è un vero nodo React si può sovrascrivere con un parser — ecco come nextImageParser swaps <img> per next/image con zero cambiamenti di markup a monte.
Tira il CSS di ogni isolato nella risposta. Block-supporta regole inline, token di tavolozza tema.json, fogli iniettati plugin – spediscono in linea con la pagina in modo da non c’è alcun cambiamento di layout dopo l’idratazione.
Mantiene <script type="application/json"> blobs intatto. È così che i blocchi interattivi (motori di movimento, fisarmoni, qualsiasi cosa con un view-script) di stato della mano al loro codice lato client senza una deviazione API separata.

Prossimo movimento

Gli stessi sei file si estendono in poche direzioni ovvie. Categorie e tag sono un altro WPGraphQL where argomento fetchPosts. Commenti e paginazione cavalcare sulla stessa query. La ricerca colpisce search argomento e si spedisce /search?q=... percorso in altri venti minuti.

Fonte completa su GitHub. Documenti di pacchetto a /docs/nextpress. Se si desidera l’architettura perché dietro mantenere WordPress e aggiungere Next.js come uno strato di consegna, quel pezzo sta arrivando.

Aggiungi un blog senza testa alla tua app Next.js in 20 minuti con NextPress

Cosa c’è nella scatola

Passo 1 — Bootstrap l’app successiva

Fase 2 — next.config.ts

Fase 3 — src/proxy.ts

Fase 4 — src/lib/wp.ts

Fase 5 — /blog indice

Fase 6 — /blog/[slug]

Cosa? <Content> fa per te