[refactor] Updated to Next15, react-notion-x 'lm' support, and fixed /[slug] to /[notionId] route (#226)

* [refactor] Updated to Next15, react-notion-x 'lm' support, and fixed /[slug] to /[notionId] route

* [refactor] Fix 'standalone' warning

* [bug] Deal with sub-pages not handled well by getPageTitle

* [refactor] Prettier fix

* [feat] dynamicParams=false for External

Author: voidranjer

next.config.mjs

@@ -10,7 +10,7 @@ const nextConfig = {
       },
     ],
   },
-  output: 'standalone',
+  // output: 'standalone', // NOTE: Check the Dockerfile for why we might need this
 };
 
 export default nextConfig;

package-lock.json

@@ -9,6 +9,7 @@
     "quality": "npm run format-check && npm run lint",
     "dev": "next dev",
     "build": "npm run quality && next build",
+    "test-build": "rm -rf .next && build && start",
     "start": "next start"
   },
   "dependencies": {
@@ -25,7 +26,7 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.3",
     "lucide-react": "^0.363.0",
-    "next": "^14.2.23",
+    "next": "^15.2.4",
     "notion-client": "^7.1.6",
     "notion-utils": "^6.16.0",
     "react": "^18",

package.json

@@ -0,0 +1,18 @@
+import NotionPage from '@/components/NotionPage';
+import { getAllPageIds, getRecordMap, getTitleByPageId } from '@/lib/notion/utils';
+
+export async function generateStaticParams() {
+  const pageIds = await getAllPageIds();
+  return pageIds.map(pageId => ({ notionId: pageId.replace(/-/g, '') }));
+}
+
+export default async function ArbitraryNotionPage({ params }: { params: Promise<{ notionId: string }> }) {
+  const { notionId } = await params;
+
+  const recordMap = await getRecordMap(notionId);
+  const title = await getTitleByPageId(notionId);
+
+  return <NotionPage recordMap={recordMap} title={title} />;
+}
+
+export const dynamicParams = false;

src/app/(pages)/[notionId]/page.tsx

@@ -1,32 +1,21 @@
-import NotionPage, { EventDetailsType } from '@/components/NotionPage';
+import NotionPage from '@/components/NotionPage';
 import { getEventPageBySlug, getEvents } from '@/lib/notion/events';
 import { getRecordMap } from '@/lib/notion/utils';
 import { notFound } from 'next/navigation';
 
 export async function generateStaticParams() {
   const events = await getEvents();
-  return events.map(event => ({
-    slug: event.slug,
-  }));
+  return events.map(event => ({ slug: event.slug }));
 }
 
-type PropsType = {
-  params: { slug: string };
-};
-
-export default async function EventPage({ params }: PropsType) {
-  const event = await getEventPageBySlug(params.slug);
+export default async function EventPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const event = await getEventPageBySlug(slug);
 
   if (!event) notFound();
 
-  const eventDetails: EventDetailsType = {
-    date: event.date,
-    venue: event.venue,
-    status: event.status,
-  };
-
   const recordMap = await getRecordMap(event.eventPageId);
   const title = event.eventName;
 
-  return <NotionPage recordMap={recordMap} title={title} eventDetails={eventDetails} />;
+  return <NotionPage recordMap={recordMap} title={title} eventDetails={event} />;
 }

src/app/(pages)/[slug]/page.tsx

@@ -3,7 +3,7 @@ import EventCard from './_components/EventCard';
 import { getEvents } from '@/lib/notion/events';
 import BlockContainer from '@/components/BlockContainer';
 
-export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
+export const revalidate = 3600;
 
 const EventsPage: React.FC = async () => {
   const res = await getEvents();

src/app/(pages)/events/[slug]/page.tsx

@@ -1,22 +1,18 @@
 import NotionPage from '@/components/NotionPage';
-import { getExternalPageIdBySlug, getExternalPageSlugs } from '@/lib/notion/external';
-import { getRecordMap, getTitleByPageId } from '@/lib/notion/utils';
+import { getExternalPages } from '@/lib/notion/external';
+import { notFound } from 'next/navigation';
 
 export async function generateStaticParams() {
-  const slugs = await getExternalPageSlugs();
-  return slugs.map((slug: string) => ({ slug }));
+  const externalPages = await getExternalPages();
+  return externalPages.map(externalPage => ({ slug: externalPage.slug }));
 }
 
-type PropsType = {
-  params: { slug: string };
-};
+export default async function ExternalPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
 
-export default async function ArbitraryNotionPage({ params }: PropsType) {
-  const slug = params.slug;
+  const externalPages = await getExternalPages();
+  const data = externalPages.find(page => page.slug === slug);
+  if (data === undefined) return notFound();
 
-  const pageId = await getExternalPageIdBySlug(slug);
-  const title = await getTitleByPageId(pageId);
-  const recordMap = await getRecordMap(pageId);
-
-  return <NotionPage recordMap={recordMap} title={title} />;
+  return <NotionPage recordMap={data.recordMap} title={data.title} />;
 }

src/app/(pages)/events/page.tsx

@@ -4,7 +4,7 @@ import { getFeaturedEvents } from '@/lib/notion/events';
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
 import { getFeaturedAnnouncements } from '@/lib/notion/announcements';
 
-export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
+export const revalidate = 3600;
 
 export default async function HomeEvents() {
   const res = await getFeaturedEvents();

src/app/(pages)/external/[slug]/page.tsx

@@ -7,7 +7,7 @@ import button from '../_assets/button.svg';
 import { getLatestCallout } from '@/lib/notion/announcements';
 import CallOutWrapper from './CallOutWrapper';
 
-export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
+export const revalidate = 3600;
 
 export default async function HeroBlock() {
   const text = await getLatestCallout();