Move preview route and update usages of nextjs-adapter methods #773

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -26,7 +26,7 @@ async function getEnonicHeaders() {
 
 const config = {
  reactStrictMode: true,
- trailingSlash: true,
+ trailingSlash: false,
  transpilePackages: ['@enonic/nextjs-adapter'],
  webpack: getEnonicWebpackConfig,
  headers: getEnonicHeaders,

package.json

@@ -11,17 +11,14 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@formatjs/intl-localematcher": "^0.5.2",
  "cross-env": "^7.0.3",
  "html-react-parser": "^5.0.3",
- "negotiator": "^0.6.3",
  "next": "^14.0.3",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "unescape": "^1.0.1"
  },
  "devDependencies": {
- "@types/negotiator": "^0.6.3",
  "@types/node": "^20.8.9",
  "@types/react": "18.2.33",
  "@types/react-dom": "^18.2.14",

src/app/[locale]/[[...contentPath]]/layout.tsx

@@ -10,9 +10,9 @@ export type LayoutProps = {
  children: ReactNode
 }
 
-export default async function ContentLayout(props: LayoutProps) {
+export default async function ContentLayout({params, children}: LayoutProps) {
 
- const {meta, common} = await fetchContent(props.params.contentPath)
+ const {meta, common} = await fetchContent(params);
 
  return (<>
  <Header meta={meta} title={common?.get?.displayName} logoUrl={getUrl('/images/xp-shield.svg', meta)}/>
@@ -21,16 +21,16 @@ export default async function ContentLayout(props: LayoutProps) {
  maxWidth: 960,
  padding: `0 1rem`,
  }}>
- {props.children}
+ {children}
  </main>
  <Footer/>
  </>
  )
 }
 
-export async function generateMetadata(props: LayoutProps, parent: ResolvingMetadata): Promise<Metadata> {
+export async function generateMetadata({params}: LayoutProps, parent: ResolvingMetadata): Promise<Metadata> {
 
- const {common} = await fetchContent(props.params.contentPath)
+ const {common} = await fetchContent(params);
 
  return {
  title: common?.get?.displayName || 'Content path layout',

src/app/[locale]/[[...contentPath]]/page.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import {ContentPathItem, fetchContent, fetchContentPathsForAllLocales, FetchContentResult} from "@enonic/nextjs-adapter";
+import {fetchContent, fetchContentPathsForAllLocales, FetchContentResult} from "@enonic/nextjs-adapter";
 import MainView from '@enonic/nextjs-adapter/views/MainView';
 
 import "@enonic/nextjs-adapter/baseMappings";
 import "../../../components/_mappings";
-import {notFound} from 'next/navigation';
+import {draftMode} from 'next/headers';
 
 export const dynamic = 'auto'
 export const dynamicParams = false // show 404 for missing in cache pages
@@ -22,25 +22,16 @@ export type PageProps = {
 }
 
 export default async function Page({params}: { params: PageProps }) {
- console.info('Accessing page', params);
+ const {isEnabled: draft} = draftMode();
+ console.info(`Accessing page${draft ? ' (draft)' : ''}`, params);
 
- const data: FetchContentResult = await fetchContent(params.contentPath)
-
- if (data.error?.code === '404') {
- notFound();
- }
+ const data: FetchContentResult = await fetchContent(params);
 
  return (
  <MainView {...data}/>
  )
 };
 
 export async function generateStaticParams(props: { params: PageProps }): Promise<any[]> {
- const paths = await fetchContentPathsForAllLocales('\${site}/');
- const result = paths.map((item: ContentPathItem) => ({
- contentPath: item.params.contentPath,
- locale: item.locale,
- }));
- console.info('Content path layout paths: ', result);
- return result;
+ return await fetchContentPathsForAllLocales('\${site}/');
 }

src/app/api/preview/route.ts

@@ -0,0 +1,53 @@
+import {NextRequest, NextResponse} from 'next/server';
+import {redirect} from 'next/navigation';
+import {draftMode} from 'next/headers';
+
+export function HEAD(req: NextRequest) {
+ return processRequest(req);
+}
+
+export function GET(req: NextRequest) {
+ return processRequest(req);
+}
+
+function processRequest(req: NextRequest) {
+ const params = req.nextUrl.searchParams;
+
+ const token = params.get('token');
+ let response = validateToken(token);
+ if (response !== null) {
+ return response;
+ }
+
+ const path = params.get('path');
+ response = validatePath(path);
+ if (response !== null) {
+ return response;
+ }
+
+ console.info(`Previewing [${path}]...`);
+
+ draftMode().enable();
+
+ redirect(!path?.length ? '/' : path);
+}
+
+function validateToken(token: string | null) {
+ if (token !== process.env.ENONIC_API_TOKEN) {
+ // XP hijacks 401 to show login page, so send 407 instead
+ return NextResponse.json({message: 'Invalid token'}, {
+ status: 407,
+ });
+ }
+ return null;
+}
+
+function validatePath(path: string | string[] | null) {
+ // If the slug doesn't exist prevent preview mode from being enabled
+ if (path === null || path === undefined) {
+ return NextResponse.json({message: 'Invalid path'}, {
+ status: 400,
+ });
+ }
+ return null;
+}

src/app/api/revalidate/route.ts

@@ -2,6 +2,8 @@ import {revalidatePath} from 'next/cache';
 import {NextRequest} from 'next/server';
 import {getProjectLocales} from '@enonic/nextjs-adapter';
 
+const LOCALE_SEGMENT = '[locale]';
+
 export async function GET(req: NextRequest) {
  const params = req.nextUrl.searchParams;
  const token = params.get('token');
@@ -16,7 +18,7 @@ export async function GET(req: NextRequest) {
 
  try {
  if (!path) {
- const localeSegment = getProjectLocales().length > 1 ? '/[locale]' : '';
+ const localeSegment = getProjectLocales().length > 1 ? `/${LOCALE_SEGMENT}` : '';
  revalidatePath(`${localeSegment}/[[..contentPath]]/page`, 'page');
  console.info(`Revalidated everything`);
  } else {

src/app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({children}: LayoutProps) {
 export function generateMetadata(): Metadata {
  return {
  title: {
- default: 'Next.js + Enonic XP = Next.XP',
+ default: 'Next.XP 3.0',
  template: '%s | Next.XP',
  },
  description: 'The React Framework for Enonic XP',