feat: Upgrade to Next 15 and React 19

app/journals/[slug]/page.tsx

@@ -6,13 +6,12 @@ import { StructuredData } from "@/components/StructuredData";
 import { Typography } from "@/components/Typography";
 import { BASE_URL } from "@/config";
 
-interface Params {
-  params: {
-    slug: string;
-  };
-}
+type Params = Promise<{ slug: string }>;
 
-export const generateMetadata = ({ params }: Params): Metadata => {
+export const generateMetadata = async (props: {
+  params: Params;
+}): Promise<Metadata> => {
+  const params = await props.params;
   const journal = allJournals.find((journal) => journal.slug === params.slug)!;
 
   const title = journal.title;
@@ -47,7 +46,8 @@ export const generateMetadata = ({ params }: Params): Metadata => {
 export const generateStaticParams = () =>
   allJournals.map(({ slug }) => ({ slug }));
 
-const JournalPage = ({ params }: Params) => {
+const JournalPage = async (props: { params: Params }) => {
+  const params = await props.params;
   const journal = allJournals.find((journal) => journal.slug === params.slug);
 
   if (!journal) {

app/posts/[slug]/page.tsx

@@ -17,11 +17,12 @@ import {
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
 
-interface Params {
-  params: { slug: string };
-}
+type Params = Promise<{ slug: string }>;
 
-export const generateMetadata = ({ params }: Params): Metadata => {
+export const generateMetadata = async (props: {
+  params: Params;
+}): Promise<Metadata> => {
+  const params = await props.params;
   const post = allPosts.find((post) => post.slug === params.slug)!;
 
   const title = post.title;
@@ -56,7 +57,8 @@ export const generateMetadata = ({ params }: Params): Metadata => {
 export const generateStaticParams = () =>
   allPosts.map(({ slug }) => ({ slug }));
 
-const PostPage = ({ params }: Params) => {
+const PostPage = async (props: { params: Params }) => {
+  const params = await props.params;
   const post = allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {

next.config.js → next.config.ts

@@ -1,7 +1,7 @@
-const { withContentlayer } = require("next-contentlayer");
+import type { NextConfig } from "next";
+import { withContentlayer } from "next-contentlayer";
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   reactStrictMode: true,
   async headers() {
     return [

package.json

@@ -25,10 +25,10 @@
     "eslint": "8.31.0",
     "eslint-config-next": "13.4.2",
     "graphql": "^16.8.1",
-    "next": "^14.2.0",
+    "next": "^15.0.2",
     "next-contentlayer": "^0.3.4",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "react": "19.0.0-rc-603e6108-20241029",
+    "react-dom": "19.0.0-rc-603e6108-20241029",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-pretty-code": "^0.10.2",