Next.js 15 Update (#26)

* Update Next.js and React versions in all packages
* Replace onRedirect function with next/link in BillingSessionStatus, since it's no longer cached by default
* Remove unused revalidatePath import in billing return page, since it's no longer cached by default
* Add Turbopack module aliases to improve development server speed
* Converted new Dynamic APIs to be Promise-based
* Adjust mobile layout
* Use ENABLE_REACT_COMPILER to enable the React Compiler in Next.js 15
* Report Errors using the new onRequestError hook

apps/web/app/(marketing)/(legal)/terms-of-service/page.tsx

@@ -1,5 +1,3 @@
-import { PageBody } from '@kit/ui/page';
-
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -18,7 +18,10 @@ import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 
 const ModeToggle = dynamic(
-  () => import('@kit/ui/mode-toggle').then((mod) => mod.ModeToggle),
+  () =>
+    import('@kit/ui/mode-toggle').then((mod) => ({
+      default: mod.ModeToggle,
+    })),
   {
     ssr: false,
   },

apps/web/app/(marketing)/_components/site-navigation-item.tsx

@@ -10,10 +10,10 @@ const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
   return cn(
-    `text-sm font-medium transition-colors duration-300 inline-flex w-max`,
+    `inline-flex w-max text-sm font-medium transition-colors duration-300`,
     {
       'dark:text-gray-300 dark:hover:text-white': !isActive,
-      'dark:text-white text-current': isActive,
+      'text-current dark:text-white': isActive,
     },
   );
 };

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -10,6 +10,10 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Post } from '../../blog/_components/post';
 
+interface BlogPageProps {
+  params: Promise<{ slug: string }>;
+}
+
 const getPostBySlug = cache(postLoader);
 
 async function postLoader(slug: string) {
@@ -20,10 +24,9 @@ async function postLoader(slug: string) {
 
 export async function generateMetadata({
   params,
-}: {
-  params: { slug: string };
-}): Promise<Metadata | undefined> {
-  const post = await getPostBySlug(params.slug);
+}: BlogPageProps): Promise<Metadata> {
+  const slug = (await params).slug;
+  const post = await getPostBySlug(slug);
 
   if (!post) {
     notFound();
@@ -57,8 +60,9 @@ export async function generateMetadata({
   });
 }
 
-async function BlogPost({ params }: { params: { slug: string } }) {
-  const post = await getPostBySlug(params.slug);
+async function BlogPost({ params }: BlogPageProps) {
+  const slug = (await params).slug;
+  const post = await getPostBySlug(slug);
 
   if (!post) {
     notFound();

apps/web/app/(marketing)/blog/page.tsx

@@ -13,6 +13,10 @@ import { SitePageHeader } from '../_components/site-page-header';
 import { BlogPagination } from './_components/blog-pagination';
 import { PostPreview } from './_components/post-preview';
 
+interface BlogPageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
 export const generateMetadata = async () => {
   const { t } = await createI18nServerInstance();
 
@@ -44,8 +48,9 @@ const getContentItems = cache(
   },
 );
 
-async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
+async function BlogPage(props: BlogPageProps) {
   const { t, resolvedLanguage: language } = await createI18nServerInstance();
+  const searchParams = await props.searchParams;
 
   const page = searchParams.page ? parseInt(searchParams.page) : 0;
   const limit = 10;

apps/web/app/(marketing)/contact/_components/contact-form.tsx

@@ -57,7 +57,7 @@ export function ContactForm() {
               await sendContactEmail(data);
 
               setState({ success: true, error: false });
-            } catch (error) {
+            } catch {
               setState({ error: true, success: false });
             }
           });

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -14,20 +14,19 @@ import { DocsCards } from '../_components/docs-cards';
 
 const getPageBySlug = cache(pageLoader);
 
+interface DocumentationPageProps {
+  params: Promise<{ slug: string[] }>;
+}
+
 async function pageLoader(slug: string) {
   const client = await createCmsClient();
 
   return client.getContentItemBySlug({ slug, collection: 'documentation' });
 }
 
-interface PageParams {
-  params: {
-    slug: string[];
-  };
-}
-
-export const generateMetadata = async ({ params }: PageParams) => {
-  const page = await getPageBySlug(params.slug.join('/'));
+export const generateMetadata = async ({ params }: DocumentationPageProps) => {
+  const slug = (await params).slug.join('/');
+  const page = await getPageBySlug(slug);
 
   if (!page) {
     notFound();
@@ -41,8 +40,9 @@ export const generateMetadata = async ({ params }: PageParams) => {
   };
 };
 
-async function DocumentationPage({ params }: PageParams) {
-  const page = await getPageBySlug(params.slug.join('/'));
+async function DocumentationPage({ params }: DocumentationPageProps) {
+  const slug = (await params).slug.join('/');
+  const page = await getPageBySlug(slug);
 
   if (!page) {
     notFound();

apps/web/app/(marketing)/page.tsx

@@ -175,7 +175,6 @@ function Home() {
   );
 }
 
-
 export default withI18n(Home);
 
 function MainCallToActionButton() {