feat: enable ppr

apps/course-builder-web/next.config.mjs

@@ -21,6 +21,9 @@ const withMDX = createMDX({
 
 /** @type {import("next").NextConfig} */
 const config = {
+  experimental: {
+    ppr: true,
+  },
   pageExtensions: ['mdx', 'ts', 'tsx'],
   transpilePackages: ['@coursebuilder/ui'],
   // @ts-expect-error

apps/course-builder-web/package.json

@@ -33,7 +33,7 @@
     "@mdx-js/react": "^3.0.0",
     "@msgpack/msgpack": "3.0.0-beta2",
     "@mux/mux-player-react": "^2.2.0",
-    "@next/mdx": "14.1.0",
+    "@next/mdx": "canary",
     "@planetscale/database": "1.14.0",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -96,7 +96,7 @@
     "lucide-react": "^0.288.0",
     "memoize-one": "^6.0.0",
     "nanoid": "^5.0.2",
-    "next": "14.1.0",
+    "next": "canary",
     "next-auth": "^4.24.5",
     "next-axiom": "^1.1.1",
     "next-mdx-remote": "^4.4.1",

apps/course-builder-web/src/app/[article]/page.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Suspense } from 'react'
 import { type Metadata, type ResolvingMetadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -34,32 +35,57 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
   }
 }
 
-export default async function ArticlePage({ params }: { params: { article: string } }) {
+async function ArticleActionBar({ slug }: { slug: string }) {
   const session = await getServerAuthSession()
   const ability = getAbility({ user: session?.user })
-  const article = await getArticle(params.article)
-
-  if (!article) {
-    notFound()
-  }
+  const article = await getArticle(slug)
 
   return (
-    <div>
-      {ability.can('update', 'Content') ? (
+    <>
+      {article && ability.can('update', 'Content') ? (
         <div className="bg-muted flex h-9 w-full items-center justify-between px-1">
           <div />
           <Button asChild className="h-7">
             <Link href={`/articles/${article.slug || article._id}/edit`}>Edit</Link>
           </Button>
         </div>
-      ) : null}
-      <article className="flex flex-col p-5 sm:p-10">
-        <h1 className="text-3xl font-bold">{article.title}</h1>
+      ) : (
+        <div className="bg-muted flex h-9 w-full items-center justify-between px-1" />
+      )}
+    </>
+  )
+}
 
-        <div className="mt-4 pb-32">
-          <ReactMarkdown className="prose dark:prose-invert">{article.body}</ReactMarkdown>
-          <ReactMarkdown>{article.description}</ReactMarkdown>
-        </div>
+async function Article({ slug }: { slug: string }) {
+  const article = await getArticle(slug)
+
+  if (!article) {
+    notFound()
+  }
+
+  return (
+    <div className="mt-4 pb-32">
+      <ReactMarkdown className="prose dark:prose-invert">{article.body}</ReactMarkdown>
+      <ReactMarkdown>{article.description}</ReactMarkdown>
+    </div>
+  )
+}
+
+async function ArticleTitle({ slug }: { slug: string }) {
+  const article = await getArticle(slug)
+
+  return <h1 className="text-3xl font-bold">{article?.title}</h1>
+}
+
+export default async function ArticlePage({ params }: { params: { article: string } }) {
+  return (
+    <div>
+      <Suspense fallback={<div className="bg-muted flex h-9 w-full items-center justify-between px-1" />}>
+        <ArticleActionBar slug={params.article} />
+      </Suspense>
+      <article className="flex flex-col p-5 sm:p-10">
+        <ArticleTitle slug={params.article} />
+        <Article slug={params.article} />
       </article>
     </div>
   )

apps/course-builder-web/src/app/articles/page.tsx

@@ -16,7 +16,7 @@ export default async function ArticlesIndexPage() {
       slug: string
     }[]
   >(
-    `*[_type == "article"] | order(_updatedAt desc) {
+    `*[_type == "article"] | order(_createdAt desc) {
     _id,
     title,
     "slug": slug.current,

apps/course-builder-web/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import '@/styles/globals.css'
 
 import * as React from 'react'
+import { Suspense } from 'react'
 import { Inter } from 'next/font/google'
 import { Party } from '@/app/_components/party'
 import { Providers } from '@/app/_components/providers'

apps/course-builder-web/src/components/navigation/links.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react'
 import Link from 'next/link'
 import { redirect, usePathname } from 'next/navigation'
-import { Logo } from '@/components/navigation'
 import { Login } from '@/components/navigation/login'
 import { User } from '@/components/navigation/user'
 import { cn } from '@/lib/utils'