upgrade next.js from 15 to 16

next.config.mjs

@@ -8,6 +8,9 @@ const withMDX = createMDX();
 const config = {
   reactStrictMode: true,
   transpilePackages: ["ethereum-identity-kit", "lucide-react"],
+  // External packages for server-side (works with both Turbopack and webpack)
+  // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908#issuecomment-1487801131
+  serverExternalPackages: ["lokijs", "encoding"],
   typescript: {
     ignoreBuildErrors: false,
   },
@@ -30,13 +33,6 @@ const config = {
       },
     ],
   },
-
-  // https://github.com/WalletConnect/walletconnect-monorepo/issues/1908#issuecomment-1487801131
-  webpack: (config) => {
-    config.externals.push("lokijs", "encoding");
-
-    return config;
-  },
 };
 
 export default withMDX(config);

package.json

@@ -6,7 +6,7 @@
     "node": ">=22 <23"
   },
   "scripts": {
-    "build": "bunx --bun next build",
+    "build": "bunx --bun next build --webpack",
     "dev": "bunx --bun next dev -p 3010 --experimental-https",
     "start": "bunx --bun next start",
     "check": "bunx @biomejs/biome check --write --unsafe ./src/*",
@@ -61,9 +61,9 @@
     "ethereum-identity-kit": "^0.2.52",
     "ethers": "^6.15.0",
     "family": "^0.1.3",
-    "fumadocs-core": "^15.7.7",
-    "fumadocs-mdx": "^11.8.2",
-    "fumadocs-ui": "^15.7.7",
+    "fumadocs-core": "^16.4.6",
+    "fumadocs-mdx": "^14.2.4",
+    "fumadocs-ui": "^16.4.6",
     "iron-session": "^8.0.4",
     "jotai": "^2.12.5",
     "lexical": "^0.32.1",
@@ -76,9 +76,9 @@
     "pino-pretty": "^13.1.1",
     "porto": "^0.2.6",
     "postcss": "^8.5.6",
-    "react": "^19.0.0-rc.1",
+    "react": "^19.2.0",
     "react-canvas-confetti": "^2.0.7",
-    "react-dom": "^19.0.0-rc.1",
+    "react-dom": "^19.2.0",
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
@@ -104,7 +104,7 @@
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@types/webpack": "^5.28.5",
-    "next": "15",
+    "next": "16",
     "patch-package": "^8.0.0",
     "tailwindcss": "4.0.0-beta.10",
     "typescript": "5.4.5"

source.config.ts

@@ -1,10 +1,10 @@
-import { defineDocs } from "fumadocs-mdx/config";
-import { defineConfig } from 'fumadocs-mdx/config';
+import { defineDocs, defineConfig } from "fumadocs-mdx/config";
+import lastModified from "fumadocs-mdx/plugins/last-modified";
 
 export const docs = defineDocs({
   dir: "docs",
 });
 
 export default defineConfig({
-  lastModifiedTime: 'git',
+  plugins: [lastModified()],
 });

src/app/api/posts/[id]/bookmark/route.ts

@@ -1,7 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerAuth } from "~/utils/getServerAuth";
 
-export async function POST(_request: NextRequest, { params }: { params: { id: string } }) {
+export async function POST(_request: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   try {
     const auth = await getServerAuth();
     if (!auth.isAuthenticated || !auth.user) {

src/app/api/posts/[id]/comments/route.ts

@@ -7,7 +7,8 @@ import { getServerAuthLight } from "~/utils/getServerAuth";
 
 export const dynamic = "force-dynamic";
 
-export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
+export async function GET(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const id = params.id;
   const limit = Number.parseInt(req.nextUrl.searchParams.get("limit") ?? "50", 10);
   const cursor = req.nextUrl.searchParams.get("cursor") || undefined;

src/app/api/posts/[id]/delete/prepare/route.ts

@@ -18,7 +18,8 @@ interface PrepareDeleteRequest {
   mode?: "auto" | "gasless" | "regular";
 }
 
-export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
+export async function POST(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   try {
     const { address: currentUserAddress } = await getServerAuthLight();
     if (!currentUserAddress) {

src/app/api/posts/[id]/edit/prepare/route.ts

@@ -20,7 +20,8 @@ interface PrepareEditRequest {
   mode?: "auto" | "gasless" | "regular";
 }
 
-export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
+export async function POST(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   try {
     const { address: currentUserAddress } = await getServerAuthLight();
     if (!currentUserAddress) {

src/app/api/posts/[id]/reaction/prepare/route.ts

@@ -20,7 +20,8 @@ interface PrepareReactionRequest {
   mode?: "auto" | "gasless" | "regular";
 }
 
-export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
+export async function POST(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   try {
     const { address: currentUserAddress } = await getServerAuthLight();
     if (!currentUserAddress) {

src/app/api/posts/[id]/route.ts

@@ -6,7 +6,8 @@ import { getServerAuthLight } from "~/utils/getServerAuth";
 
 export const dynamic = "force-dynamic";
 
-export async function GET(_req: NextRequest, { params }: { params: { id: string } }) {
+export async function GET(_req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const id = params.id;
   const auth = await getServerAuthLight();
   const currentUserAddress = auth.address || "";

src/app/api/search/route.ts

@@ -7,5 +7,5 @@ export const { GET } = createFromSource(source, {
     en: { language: "english" },
     zh: { language: "english" },
     jp: { language: "english" },
-  }
+  },
 });

src/app/api/user/[id]/followers/route.ts

@@ -14,7 +14,8 @@ interface EfpFollowersResponse {
   updated_at?: string;
 }
 
-export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
+export async function GET(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const id = params.id;
   const limit = Number.parseInt(req.nextUrl.searchParams.get("limit") ?? "5", 10);
 

src/app/api/user/[id]/following/route.ts

@@ -17,7 +17,8 @@ interface EfpFollowingResponse {
   tags?: string[];
 }
 
-export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
+export async function GET(req: NextRequest, props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
   const id = params.id;
   const limit = Number.parseInt(req.nextUrl.searchParams.get("limit") ?? "5", 10);
 

src/app/api/user/ens/[address]/route.ts

@@ -2,7 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { fetchEnsUser } from "~/utils/ens/converters/userConverter";
 import { getServerAuthLight } from "~/utils/getServerAuth";
 
-export async function GET(_req: NextRequest, { params }: { params: { address: string } }) {
+export async function GET(_req: NextRequest, props: { params: Promise<{ address: string }> }) {
+  const params = await props.params;
   try {
     const { address } = params;
 

src/app/c/[community]/about/page.tsx

@@ -8,12 +8,13 @@ import { getScanUrl } from "~/utils/getScanUrl";
 import { resolveUrl } from "~/utils/resolveUrl";
 
 interface CommunityAboutPageProps {
-  params: {
+  params: Promise<{
     community: string;
-  };
+  }>;
 }
 
-export async function generateMetadata({ params }: CommunityAboutPageProps): Promise<Metadata> {
+export async function generateMetadata(props: CommunityAboutPageProps): Promise<Metadata> {
+  const params = await props.params;
   const community = await getCommunityByAddress(params.community);
 
   if (!community) {
@@ -54,7 +55,8 @@ export async function generateMetadata({ params }: CommunityAboutPageProps): Pro
   };
 }
 
-export default async function CommunityAboutPage({ params }: CommunityAboutPageProps) {
+export default async function CommunityAboutPage(props: CommunityAboutPageProps) {
+  const params = await props.params;
   const community = await getCommunityByAddress(params.community);
 
   if (!community) {

src/app/c/[community]/layout.tsx

@@ -5,12 +5,16 @@ import { getCommunityByAddress } from "~/utils/getCommunityByAddress";
 
 interface CommunityLayoutProps {
   children: React.ReactNode;
-  params: {
+  params: Promise<{
     community: string;
-  };
+  }>;
 }
 
-export default async function CommunityLayout({ children, params }: CommunityLayoutProps) {
+export default async function CommunityLayout(props: CommunityLayoutProps) {
+  const params = await props.params;
+
+  const { children } = props;
+
   const community = await getCommunityByAddress(params.community);
 
   if (!community) {

src/app/c/[community]/page.tsx

@@ -7,12 +7,13 @@ import { getCommunityByAddress } from "~/utils/getCommunityByAddress";
 import { resolveUrl } from "~/utils/resolveUrl";
 
 interface CommunityPageProps {
-  params: {
+  params: Promise<{
     community: string;
-  };
+  }>;
 }
 
-export async function generateMetadata({ params }: CommunityPageProps): Promise<Metadata> {
+export async function generateMetadata(props: CommunityPageProps): Promise<Metadata> {
+  const params = await props.params;
   const community = await getCommunityByAddress(params.community);
 
   if (!community) {
@@ -53,7 +54,8 @@ export async function generateMetadata({ params }: CommunityPageProps): Promise<
   };
 }
 
-export default async function CommunityPage({ params }: CommunityPageProps) {
+export default async function CommunityPage(props: CommunityPageProps) {
+  const params = await props.params;
   const community = await getCommunityByAddress(params.community);
 
   if (!community) {

src/app/communities/page.tsx

@@ -8,7 +8,8 @@ export const metadata: Metadata = {
   description: "Discover and join communities on Flow Talk",
 };
 
-export default function CommunitiesPage({ searchParams }: { searchParams?: { q?: string } }) {
+export default async function CommunitiesPage(props: { searchParams?: Promise<{ q?: string }> }) {
+  const searchParams = await props.searchParams;
   const query = searchParams?.q || "";
 
   return (

src/app/login/page.tsx

@@ -1,18 +1,17 @@
 "use client";
 
 import { ChevronDown, Loader2 } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import type { Connector } from "wagmi";
 import { useConnect, useDisconnect } from "wagmi";
-
-import { WalletConnectorButton, getConnectorDisplay } from "~/components/WalletConnectorButton";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { getConnectorDisplay, WalletConnectorButton } from "~/components/WalletConnectorButton";
 import { useAuth } from "~/hooks/useSiweAuth";
 import { prettifyViemError } from "~/utils/prettifyViemError";
-import { AnimatePresence, motion } from "motion/react";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -95,7 +94,11 @@ export default function LoginPage() {
                         initial={{ height: 0, opacity: 0, marginBottom: 0 }}
                         animate={{ height: "auto", opacity: 1, marginBottom: 8 }}
                         exit={{ height: 0, opacity: 0, marginBottom: 0 }}
-                        transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1], opacity: { duration: 0.12, ease: [0.4, 0, 0.2, 1] } }}
+                        transition={{
+                          duration: 0.2,
+                          ease: [0.4, 0, 0.2, 1],
+                          opacity: { duration: 0.12, ease: [0.4, 0, 0.2, 1] },
+                        }}
                         className="flex flex-col gap-2 overflow-visible"
                       >
                         {otherConnectors.map((connector) => {

src/app/p/[post]/page.tsx

@@ -6,7 +6,8 @@ import { PostView } from "~/components/post/PostView";
 import { generatePostOGUrl } from "~/utils/generateOGUrl";
 import { getBaseUrl } from "~/utils/getBaseUrl";
 
-export async function generateMetadata({ params }: { params: { post: string } }): Promise<Metadata> {
+export async function generateMetadata(props: { params: Promise<{ post: string }> }): Promise<Metadata> {
+  const params = await props.params;
   try {
     const response = await fetch(`${getBaseUrl()}/api/posts/${params.post}`, {
       cache: "no-store",
@@ -77,7 +78,8 @@ export async function generateMetadata({ params }: { params: { post: string } })
   }
 }
 
-export default async function PostPage({ params }: { params: { post: string } }) {
+export default async function PostPage(props: { params: Promise<{ post: string }> }) {
+  const params = await props.params;
   try {
     const response = await fetch(`${getBaseUrl()}/api/posts/${params.post}`, {
       cache: "no-store",

src/app/policy/page.tsx

@@ -21,10 +21,10 @@ const PolicyPage = () => {
     <div className="prose dark:prose-invert p-8 lg:prose-lg">
       <h2>Privacy Policy</h2>
       <p>
-        Flow Talk ("us", "we", or "our") operates flow.talk (the "Service"). This page informs you of our policies regarding
-        the collection, use and disclosure of Personal Information we receive from users of the Service. We use your
-        Personal Information only for identifying you on the website and improving the Service. By using the Service,
-        you agree to the collection and use of information in accordance with this policy.
+        Flow Talk ("us", "we", or "our") operates flow.talk (the "Service"). This page informs you of our policies
+        regarding the collection, use and disclosure of Personal Information we receive from users of the Service. We
+        use your Personal Information only for identifying you on the website and improving the Service. By using the
+        Service, you agree to the collection and use of information in accordance with this policy.
       </p>
       <h4>Information Collection And Use</h4>
       <p>

src/app/robots.ts

@@ -8,12 +8,7 @@ export default function robots(): MetadataRoute.Robots {
       {
         userAgent: "*",
         allow: "/",
-        disallow: [
-          "/api/",
-          "/settings",
-          "/bookmarks",
-          "/activity",
-        ],
+        disallow: ["/api/", "/settings", "/bookmarks", "/activity"],
       },
     ],
     sitemap: `${baseUrl}/sitemap.xml`,

src/app/sitemap.ts

@@ -60,9 +60,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   for (const lang of languages) {
     for (const doc of docPaths) {
       // English docs don't have language prefix due to hideLocale: "default-locale"
-      const url = lang === "en"
-        ? `${baseUrl}/docs/${doc.path}`
-        : `${baseUrl}/${lang}/docs/${doc.path}`;
+      const url = lang === "en" ? `${baseUrl}/docs/${doc.path}` : `${baseUrl}/${lang}/docs/${doc.path}`;
 
       docsPages.push({
         url,
@@ -124,11 +122,5 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     },
   ];
 
-  return [
-    ...corePages,
-    ...featurePages,
-    ...docsPages,
-    ...legalPages,
-    ...accountPages,
-  ];
+  return [...corePages, ...featurePages, ...docsPages, ...legalPages, ...accountPages];
 }

src/app/tos/page.tsx

@@ -40,8 +40,8 @@ const ConditionsPage = () => {
       <p>
         Users are encouraged to report any violations of our policies to us by emailing
         <a href="mailto:contact@kualta.dev">contact@kualta.dev</a>. While we take reports seriously and review them
-        carefully, we emphasize that Flow Talk operates in a permissionless environment, and we cannot remove or restrict
-        accounts or content on the underlying blockchain.
+        carefully, we emphasize that Flow Talk operates in a permissionless environment, and we cannot remove or
+        restrict accounts or content on the underlying blockchain.
       </p>
 
       <h4>4. Disclaimer of Liability</h4>

src/app/u/[user]/comments/page.tsx

@@ -3,7 +3,8 @@ import { Feed } from "~/components/Feed";
 import { PostView } from "~/components/post/PostView";
 import { getUserByUsername } from "~/utils/getUserByHandle";
 
-export async function generateMetadata({ params }: { params: { user: string } }): Promise<Metadata> {
+export async function generateMetadata(props: { params: Promise<{ user: string }> }): Promise<Metadata> {
+  const params = await props.params;
   const handle = params.user;
   const title = `${handle}`;
   return {
@@ -23,7 +24,8 @@ export async function generateMetadata({ params }: { params: { user: string } })
   };
 }
 
-const user = async ({ params }: { params: { user: string } }) => {
+const user = async (props: { params: Promise<{ user: string }> }) => {
+  const params = await props.params;
   const handle = params.user;
   const user = await getUserByUsername(handle);