[next]: Add data fetching and preview (#2154)

* init preview example

* update gql client, add headers param

* update template-hierarchy, add id and asPreview

* add preview utility to @faustjs/nextjs package

* initial

* new templates

* add homepage

* style fixes

* update uri expression

* rename example name, add readme

Author: ahuseyn

examples/nextjs/kitchen-sink/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+package-lock.json

examples/nextjs/kitchen-sink/README.md

@@ -0,0 +1,40 @@
+# Kitchen Sink Example
+
+A comprehensive Next.js example showcasing FaustJS features including template hierarchy, data fetching, and WordPress integration.
+
+## Features
+
+- **Template Hierarchy**: Dynamic WordPress template mapping (single, page, archive, home)
+- **Data Fetching**: Server-side rendering with WordPress GraphQL data
+- **Preview Mode**: WordPress post/page previews with authentication
+- **Fallback Routing**: Catch-all routing with blocking fallback strategy
+- **Dynamic Loading**: Code-split templates for optimal performance
+
+## Quick Start
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Configure environment variables:
+
+   ```bash
+   cp .env.example .env.local
+   # Add your NEXT_PUBLIC_WORDPRESS_URL
+   ```
+
+3. Run development server:
+   ```bash
+   npm run dev
+   ```
+
+## Architecture
+
+- Uses `[[...identifier]].js` for dynamic WordPress routing
+- Template queries are fetched server-side using `@faustjs/data-fetching`
+- WordPress templates are dynamically loaded based on content type
+- Supports both static generation and draft previews
+
+Perfect for testing FaustJS capabilities and as a reference implementation.

examples/nextjs/kitchen-sink/eslint.config.mjs

@@ -0,0 +1,20 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+const eslintConfig = [
+  ...compat.config({
+    extends: ["eslint:recommended", "next/core-web-vitals"],
+  }),
+];
+
+export default eslintConfig;

examples/nextjs/kitchen-sink/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/nextjs/kitchen-sink/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

examples/nextjs/kitchen-sink/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@faustjs/kitchen-sink-example",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@faustjs/nextjs": "workspace:*",
+		"@faustjs/template-hierarchy": "workspace:*",
+		"@faustjs/data-fetching": "workspace:*",
+		"graphql": "^16.11.0",
+		"graphql-tag": "^2.12.6",
+		"next": "15.2.4",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@eslint/eslintrc": "^3",
+		"@tailwindcss/postcss": "^4",
+		"eslint": "^9",
+		"eslint-config-next": "15.2.4",
+		"tailwindcss": "^4"
+	}
+}

examples/nextjs/kitchen-sink/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

examples/nextjs/kitchen-sink/public/favicon.ico

@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+export function BlogPostItem({ post }) {
+  const { title, date, excerpt, uri, featuredImage } = post ?? {};
+
+  return (
+    <article className='container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm bg-gray-50 mb-4'>
+      <time dateTime={date} className='text-sm text-gray-600'>
+        {new Date(date).toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+        })}
+      </time>
+
+      {featuredImage && (
+        <img src={featuredImage?.node?.sourceUrl} alt='' className='w-full h-48 object-cover rounded-t-lg mt-2 mb-4' />
+      )}
+
+      <h2 className='mt-3'>
+        <Link href={uri} className='text-2xl font-bold hover:underline'>
+          {title}
+        </Link>
+      </h2>
+
+      <div className='mt-2 mb-4' dangerouslySetInnerHTML={{ __html: excerpt }} />
+
+      <Link href={uri} className='hover:underline text-orange-600 mt-4'>
+        Read more
+      </Link>
+    </article>
+  );
+}

examples/nextjs/kitchen-sink/src/components/BlogPostItem.js

@@ -0,0 +1,20 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
+import Link from 'next/link';
+
+export default function Header() {
+	return (
+		<header className="bg-gray-800 text-white py-4 px-8">
+			<div className="flex justify-between items-center max-w-4xl mx-auto">
+				<div className="text-3xl font-semibold">
+					<Link href="/">Headless</Link>
+				</div>
+
+				<nav className="space-x-6">
+					<Link href="/" className="text-lg hover:underline">
+						Home
+					</Link>
+				</nav>
+			</div>
+		</header>
+	);
+}