Update and improve the Next.js example

apps/nextjs/next.config.mjs

@@ -1,61 +1,13 @@
-// import path from 'path';
+import { withPlone } from '@plone/nextjs/plugin';
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig = withPlone({
   typescript: {
     ignoreBuildErrors: true,
   },
   // sassOptions: {
   //   includePaths: [path.join(__dirname, 'src/lib/components/src/styles')],
   // },
-
-  // webpack(config) {
-  //   config.resolve.alias = {
-  //     ...config.resolve.alias,
-  //     '../fonts': path.resolve(__dirname, 'src/lib/components/src/fonts'),
-  //   };
-
-  //   return config;
-  // },
-
-  // Rewrite to the backend to avoid CORS
-  async rewrites() {
-    let apiServerURL, vhmRewriteRule;
-    if (
-      process.env.API_SERVER_URL &&
-      (process.env.NEXT_PRODUCTION_URL || process.env.NEXT_PUBLIC_VERCEL_URL)
-    ) {
-      // We are in Vercel
-      apiServerURL = process.env.API_SERVER_URL;
-      vhmRewriteRule = `/VirtualHostBase/https/${
-        process.env.NEXT_PRODUCTION_URL
-          ? // We are in the production deployment
-            process.env.NEXT_PRODUCTION_URL
-          : // We are in the preview deployment
-            process.env.NEXT_PUBLIC_VERCEL_URL
-      }%3A443/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot`;
-    } else if (process.env.API_SERVER_URL) {
-      // We are in development
-      apiServerURL = process.env.API_SERVER_URL;
-      vhmRewriteRule =
-        '/VirtualHostBase/http/localhost%3A3000/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot';
-    } else {
-      // We are in development and the API_SERVER_URL is not set, so we use a local backend
-      apiServerURL = 'http://localhost:8080';
-      vhmRewriteRule =
-        '/VirtualHostBase/http/localhost%3A3000/Plone/%2B%2Bapi%2B%2B/VirtualHostRoot';
-    }
-
-    return [
-      {
-        source: '/\\+\\+api\\+\\+/:slug*',
-        destination:
-          // 'https://static.197.123.88.23.clients.your-server.de/api/:slug*',
-          // `${apiServerURL}/:slug*`,
-          `${apiServerURL}${vhmRewriteRule}/:slug*`,
-      },
-    ];
-  },
-};
+});
 
 export default nextConfig;

apps/nextjs/package.json

@@ -9,13 +9,20 @@
     "start:prod": "next start",
     "lint": "next lint"
   },
+  "addons": [
+    "@plone/quanta"
+  ],
   "dependencies": {
     "@plone/blocks": "workspace: *",
     "@plone/client": "workspace: *",
     "@plone/components": "workspace: *",
+    "@plone/nextjs": "workspace: *",
     "@plone/providers": "workspace: *",
+    "@plone/quanta": "workspace:^",
     "@plone/registry": "workspace: *",
+    "@plone/slots": "workspace: *",
     "@tanstack/react-query": "^5.59.0",
+    "clsx": "^2.1.1",
     "next": "14.2.14",
     "react": "^18",
     "react-aria-components": "^1.4.0",

apps/nextjs/src/app/[[...slug]]/page.tsx

@@ -0,0 +1,43 @@
+import SlotRenderer from '@plone/slots/src/SlotRenderer';
+import { getServerQueryClient, client as ploneClient } from '@/helpers/client';
+
+const expand = ['breadcrumbs', 'navigation'];
+
+export default async function Main({
+  params,
+  searchParams,
+}: {
+  params: { slug?: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const { slug = [] } = params;
+  const path = '/' + slug.join('/');
+  const queryClient = getServerQueryClient();
+  const { getContentQuery } = ploneClient;
+  const content = await queryClient.fetchQuery(
+    getContentQuery({ path, expand }),
+  );
+  const search = new URLSearchParams();
+  Object.entries(searchParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((v) => search.append(key, v));
+    } else if (value) {
+      search.append(key, value);
+    }
+  });
+  const location = {
+    pathname: path,
+    search: search.toString(),
+    hash: '',
+    state: null,
+    key: '',
+  };
+
+  return (
+    <>
+      <SlotRenderer name="header" content={content} location={location} />
+      <SlotRenderer name="main" content={content} location={location} />
+      <SlotRenderer name="footer" content={content} location={location} />
+    </>
+  );
+}

apps/nextjs/src/app/layout.tsx

@@ -1,22 +1,63 @@
-import type { Metadata } from 'next';
+import cx from 'clsx';
+import type { Viewport } from 'next';
 import { Inter } from 'next/font/google';
-import Providers from './Providers';
+import Providers from '@/components/providers/Providers';
+import { getServerQueryClient, client as ploneClient } from '@/helpers/client';
+import '@plone/components/src/styles/basic/theme.css';
+import '@plone/components/src/styles/quanta/theme.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export const metadata: Metadata = {
-  title: 'Next.js app powered by Plone',
-  description: '',
+const expand = ['breadcrumbs', 'navigation'];
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug?: string[] };
+}) {
+  const { slug = [] } = params;
+  const path = '/' + slug.join('/');
+  const queryClient = getServerQueryClient();
+  const { getContentQuery } = ploneClient;
+  const data = await queryClient.fetchQuery(getContentQuery({ path, expand }));
+
+  return {
+    title: `${data.title || ''} - Next.js app powered by Plone`,
+    description: data.description,
+  };
+}
+
+export const viewport: Viewport = {
+  themeColor: '#fff',
+  minimumScale: 1,
+  initialScale: 1,
+  width: 'device-width',
+  viewportFit: 'cover',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
-}: {
+  params,
+}: Readonly<{
   children: React.ReactNode;
-}) {
+  params: { slug?: string[] };
+}>) {
+  const { slug = [] } = params;
+  const path = '/' + slug.join('/');
+  const queryClient = getServerQueryClient();
+  const { getContentQuery } = ploneClient;
+  const data = await queryClient.fetchQuery(getContentQuery({ path, expand }));
+
+  const className = cx(
+    inter.className,
+    `view-${data.layout ?? 'view'}view`,
+    `contenttype-${data['@type'].replace(' ', '').toLowerCase()}`,
+    `section-${slug[slug.length - 1] || 'home'}`,
+  );
+
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={className}>
         <Providers>{children}</Providers>
       </body>
     </html>