chore: upgrade blog example to Next.js 16

.changeset/modernize-blog-example.md

@@ -0,0 +1,5 @@
+---
+"notcms": patch
+---
+
+Update the Next.js blog example to Next.js 16 and React 19.

.github/workflows/main.yml

@@ -19,3 +19,5 @@ jobs:
         working-directory: packages/notcms
       - run: pnpm run test
         working-directory: packages/notcms
+      - run: pnpm run build:ci
+        working-directory: examples/nextjs-simple-blog-template

examples/nextjs-simple-blog-template/components/Header.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Header = (): JSX.Element => {
+export const Header = (): React.JSX.Element => {
   return (
     <div className="flex w-[1440px] h-16 items-center gap-10 px-32 py-0 relative">
       <div className="flex items-center gap-2 relative flex-1 grow">

examples/nextjs-simple-blog-template/components/blog/list.tsx

@@ -18,6 +18,8 @@ export function BlogPagesList({
   pages: Pages;
   writers: Writers;
 }) {
+  const featuredPage = pages[0];
+
   return (
     <main className="container max-w-[1440px] px-4 md:px-32 mx-auto py-8">
       <div className="flex flex-col w-full mb-8 items-start gap-5 flex-[0_0_auto]">
@@ -60,13 +62,15 @@ export function BlogPagesList({
       </div>
 
       <div className="grid grid-cols-1 gap-8">
-        <HeroBlogPostCard
-          className="hidden md:flex"
-          page={pages[0]}
-          writer={writers.find(
-            (w) => w.id === pages[0].properties.writers?.[0]
-          )}
-        />
+        {featuredPage && (
+          <HeroBlogPostCard
+            className="hidden md:flex"
+            page={featuredPage}
+            writer={writers.find(
+              (writer) => writer.id === featuredPage.properties.writers?.[0]
+            )}
+          />
+        )}
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:first:hidden">
           {pages.map((page, i) => {

examples/nextjs-simple-blog-template/package.json

@@ -5,22 +5,24 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "build:ci": "node scripts/build-ci.mjs",
+    "start": "next start"
   },
   "dependencies": {
+    "clsx": "2.1.1",
     "marked": "^14.1.3",
-    "next": "14.2.32",
+    "next": "16.2.10",
     "notcms": "0.0.12-development",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwind-merge": "3.6.0"
   },
   "devDependencies": {
     "@types/node": "^24",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.16",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5"
   }
 }

examples/nextjs-simple-blog-template/scripts/build-ci.mjs

@@ -0,0 +1,43 @@
+import { spawn } from "node:child_process";
+import { createServer } from "node:http";
+
+const host = "127.0.0.1";
+const server = createServer((_request, response) => {
+  response.writeHead(200, { "Content-Type": "application/json" });
+  response.end(JSON.stringify({ data: [] }));
+});
+
+await new Promise((resolve, reject) => {
+  server.once("error", reject);
+  server.listen(0, host, resolve);
+});
+
+const address = server.address();
+if (!address || typeof address === "string") {
+  throw new Error("Failed to start the NotCMS mock server.");
+}
+
+let exitCode = 1;
+try {
+  const command = process.platform === "win32" ? "next.cmd" : "next";
+  exitCode = await new Promise((resolve, reject) => {
+    const build = spawn(command, ["build"], {
+      env: {
+        ...process.env,
+        NOTCMS_API_HOST: `http://${host}:${address.port}`,
+        NOTCMS_SECRET_KEY: "ci-build",
+        NOTCMS_WORKSPACE_ID: "ci-build",
+      },
+      stdio: "inherit",
+    });
+
+    build.once("error", reject);
+    build.once("exit", (code) => resolve(code ?? 1));
+  });
+} finally {
+  await new Promise((resolve, reject) => {
+    server.close((error) => (error ? reject(error) : resolve()));
+  });
+}
+
+process.exitCode = exitCode;

examples/nextjs-simple-blog-template/tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,8 +19,15 @@
     ],
     "paths": {
       "~/*": ["./*"]
-    }
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }