chore: next version upgrade (#4291)

apps/demo-react-native/package.json

@@ -15,7 +15,8 @@
     "@formbricks/react-native": "workspace:*",
     "expo": "51.0.26",
     "expo-status-bar": "1.12.1",
-    "react": "18.3.1",
+    "react": "19.0.0-rc-ed15d500-20241110",
+    "react-dom": "19.0.0-rc-ed15d500-20241110",
     "react-native": "0.74.4",
     "react-native-webview": "13.8.6"
   },

apps/demo-react-native/src/app.tsx

@@ -1,4 +1,5 @@
 import { StatusBar } from "expo-status-bar";
+import type { JSX } from "react";
 import { Button, LogBox, StyleSheet, Text, View } from "react-native";
 import Formbricks, { track } from "@formbricks/react-native";
 

apps/demo/package.json

@@ -14,9 +14,9 @@
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
     "lucide-react": "0.452.0",
-    "next": "14.2.16",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "next": "15.0.3",
+    "react": "19.0.0-rc-ed15d500-20241110",
+    "react-dom": "19.0.0-rc-ed15d500-20241110"
   },
   "devDependencies": {
     "@formbricks/eslint-config": "workspace:*",

apps/docs/package.json

@@ -24,7 +24,7 @@
     "@mapbox/rehype-prism": "0.9.0",
     "@mdx-js/loader": "3.0.1",
     "@mdx-js/react": "3.0.1",
-    "@next/mdx": "14.2.15",
+    "@next/mdx": "15.0.3",
     "@paralleldrive/cuid2": "2.2.2",
     "@sindresorhus/slugify": "2.2.1",
     "@tailwindcss/typography": "0.5.15",
@@ -39,7 +39,7 @@
     "lucide-react": "0.452.0",
     "mdast-util-to-string": "4.0.0",
     "mdx-annotations": "0.1.4",
-    "next": "14.2.16",
+    "next": "15.0.3",
     "next-plausible": "3.12.2",
     "next-seo": "6.6.0",
     "next-sitemap": "4.2.3",
@@ -47,8 +47,8 @@
     "node-fetch": "3.3.2",
     "prism-react-renderer": "2.4.0",
     "prismjs": "1.29.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-ed15d500-20241110",
+    "react-dom": "19.0.0-rc-ed15d500-20241110",
     "react-highlight-words": "0.20.0",
     "react-markdown": "9.0.1",
     "react-responsive-embed": "2.1.0",

apps/storybook/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@formbricks/ui": "workspace:*",
     "eslint-plugin-react-refresh": "0.4.12",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0-rc-ed15d500-20241110",
+    "react-dom": "19.0.0-rc-ed15d500-20241110"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "2.0.2",

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/invite/page.tsx

@@ -10,12 +10,13 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface InvitePageProps {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
+  }>;
 }
 
-const Page = async ({ params }: InvitePageProps) => {
+const Page = async (props: InvitePageProps) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -8,12 +8,13 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface ConnectPageProps {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
+  }>;
 }
 
-const Page = async ({ params }: ConnectPageProps) => {
+const Page = async (props: ConnectPageProps) => {
+  const params = await props.params;
   const t = await getTranslations();
   const environment = await getEnvironment(params.environmentId);
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/layout.tsx

@@ -4,7 +4,11 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { AuthorizationError } from "@formbricks/types/errors";
 
-const OnboardingLayout = async ({ children, params }) => {
+const OnboardingLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {
     return redirect(`/auth/login`);

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -11,12 +11,13 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface XMTemplatePageProps {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
+  }>;
 }
 
-const Page = async ({ params }: XMTemplatePageProps) => {
+const Page = async (props: XMTemplatePageProps) => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   const environment = await getEnvironment(params.environmentId);
   const t = await getTranslations();

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -11,7 +11,7 @@ import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 
 export const getTeamsByOrganizationId = reactCache(
-  (organizationId: string): Promise<TOrganizationTeam[] | null> =>
+  async (organizationId: string): Promise<TOrganizationTeam[] | null> =>
     cache(
       async () => {
         validateInputs([organizationId, ZId]);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/layout.tsx

@@ -5,7 +5,11 @@ import { getEnvironments } from "@formbricks/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
 import { getUserProducts } from "@formbricks/lib/product/service";
 
-const LandingLayout = async ({ children, params }) => {
+const LandingLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {
     return redirect(`/auth/login`);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -8,7 +8,8 @@ import { getOrganization, getOrganizationsByUserId } from "@formbricks/lib/organ
 import { getUser } from "@formbricks/lib/user/service";
 import { Header } from "@formbricks/ui/components/Header";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.tsx

@@ -9,7 +9,11 @@ import { getUser } from "@formbricks/lib/user/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 import { ToasterClient } from "@formbricks/ui/components/ToasterClient";
 
-const ProductOnboardingLayout = async ({ children, params }) => {
+const ProductOnboardingLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/layout.tsx

@@ -4,7 +4,11 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 
-const OnboardingLayout = async ({ children, params }) => {
+const OnboardingLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {
     return redirect(`/auth/login`);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/channel/page.tsx

@@ -9,12 +9,13 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface ChannelPageProps {
-  params: {
+  params: Promise<{
     organizationId: string;
-  };
+  }>;
 }
 
-const Page = async ({ params }: ChannelPageProps) => {
+const Page = async (props: ChannelPageProps) => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {
     return redirect(`/auth/login`);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/mode/page.tsx

@@ -9,12 +9,13 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface ModePageProps {
-  params: {
+  params: Promise<{
     organizationId: string;
-  };
+  }>;
 }
 
-const Page = async ({ params }: ModePageProps) => {
+const Page = async (props: ModePageProps) => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {
     return redirect(`/auth/login`);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/page.tsx

@@ -16,17 +16,19 @@ import { Button } from "@formbricks/ui/components/Button";
 import { Header } from "@formbricks/ui/components/Header";
 
 interface ProductSettingsPageProps {
-  params: {
+  params: Promise<{
     organizationId: string;
-  };
-  searchParams: {
+  }>;
+  searchParams: Promise<{
     channel?: TProductConfigChannel;
     industry?: TProductConfigIndustry;
     mode?: TProductMode;
-  };
+  }>;
 }
 
-const Page = async ({ params, searchParams }: ProductSettingsPageProps) => {
+const Page = async (props: ProductSettingsPageProps) => {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -13,7 +13,11 @@ import { AuthorizationError } from "@formbricks/types/errors";
 import { DevEnvironmentBanner } from "@formbricks/ui/components/DevEnvironmentBanner";
 import { ToasterClient } from "@formbricks/ui/components/ToasterClient";
 
-const SurveyEditorEnvironmentLayout = async ({ children, params }) => {
+const SurveyEditorEnvironmentLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddressQuestionForm.tsx

@@ -4,7 +4,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import { type JSX, useEffect } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyAddressQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx

@@ -4,7 +4,7 @@ import { LocalizedEditor } from "@/modules/ee/multi-language-surveys/components/
 import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { type JSX, useState } from "react";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyCTAQuestion } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CalQuestionForm.tsx

@@ -1,7 +1,7 @@
 import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
+import { type JSX, useEffect, useState } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyCalQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConsentQuestionForm.tsx

@@ -3,7 +3,7 @@
 import { LocalizedEditor } from "@/modules/ee/multi-language-surveys/components/localized-editor";
 import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInput";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { type JSX, useState } from "react";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyConsentQuestion } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ContactInfoQuestionForm.tsx

@@ -4,7 +4,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import { type JSX, useEffect } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyContactInfoQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/DateQuestionForm.tsx

@@ -2,6 +2,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyDateQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FileUploadQuestionForm.tsx

@@ -6,7 +6,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon, XCircleIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { type JSX, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { createI18nString } from "@formbricks/lib/i18n/utils";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx

@@ -4,6 +4,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon, TrashIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceQuestionForm.tsx

@@ -8,7 +8,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { createId } from "@paralleldrive/cuid2";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useEffect, useRef, useState } from "react";
+import { type JSX, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx

@@ -4,6 +4,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TSurvey, TSurveyNPSQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx

@@ -4,6 +4,7 @@ import { QuestionFormInput } from "@/modules/surveys/components/QuestionFormInpu
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { HashIcon, LinkIcon, MailIcon, MessageSquareTextIcon, PhoneIcon, PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import {

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx

@@ -3,6 +3,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { createId } from "@paralleldrive/cuid2";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx

@@ -1,6 +1,6 @@
 import { PaintbrushIcon, Rows3Icon, SettingsIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
+import { type JSX, useMemo } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyEditorTabs } from "@formbricks/types/surveys/types";
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/RankingQuestionForm.tsx

@@ -7,7 +7,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { createId } from "@paralleldrive/cuid2";
 import { PlusIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useEffect, useRef, useState } from "react";
+import { type JSX, useEffect, useRef, useState } from "react";
 import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";
 import { TI18nString, TSurvey, TSurveyRankingQuestion } from "@formbricks/types/surveys/types";

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx

@@ -24,14 +24,17 @@ import { getUserLocale } from "@formbricks/lib/user/service";
 import { ErrorComponent } from "@formbricks/ui/components/ErrorComponent";
 import { SurveyEditor } from "./components/SurveyEditor";
 
-export const generateMetadata = async ({ params }) => {
+export const generateMetadata = async (props) => {
+  const params = await props.params;
   const survey = await getSurvey(params.surveyId);
   return {
     title: survey?.name ? `${survey?.name} | Editor` : "Editor",
   };
 };
 
-const Page = async ({ params, searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const t = await getTranslations();
   const [
     survey,

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/templates/page.tsx

@@ -14,17 +14,19 @@ import { TTemplateRole } from "@formbricks/types/templates";
 import { TemplateContainerWithPreview } from "./components/TemplateContainer";
 
 interface SurveyTemplateProps {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
-  searchParams: {
+  }>;
+  searchParams: Promise<{
     channel?: TProductConfigChannel;
     industry?: TProductConfigIndustry;
     role?: TTemplateRole;
-  };
+  }>;
 }
 
-const Page = async ({ params, searchParams }: SurveyTemplateProps) => {
+const Page = async (props: SurveyTemplateProps) => {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   const environmentId = params.environmentId;

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -3,7 +3,8 @@ import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper
 
 export const dynamic = "force-dynamic";
 
-const Page = ({ searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
   const { environmentId } = searchParams;
 
   return (

apps/web/app/(app)/environments/[environmentId]/(people)/attributes/page.tsx

@@ -21,7 +21,8 @@ export const metadata: Metadata = {
   title: "Attributes",
 };
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   let attributeClasses = await getAttributeClasses(params.environmentId);
   const t = await getTranslations();
   const product = await getProductByEnvironmentId(params.environmentId);

apps/web/app/(app)/environments/[environmentId]/(people)/layout.tsx

@@ -9,7 +9,11 @@ import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/ser
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 
-const ConfigLayout = async ({ children, params }) => {
+const ConfigLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const [organization, session] = await Promise.all([
     getOrganizationByEnvironmentId(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/(people)/people/[personId]/components/ResponseSection.tsx

@@ -54,7 +54,7 @@ export const ResponseSection = async ({
 
   const productPermission = await getProductPermissionByUserId(session.user.id, product.id);
 
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
 
   return (
     <ResponseTimeline

apps/web/app/(app)/environments/[environmentId]/(people)/people/[personId]/page.tsx

@@ -19,7 +19,8 @@ import { getTagsByEnvironmentId } from "@formbricks/lib/tag/service";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [environment, environmentTags, product, session, organization, person, attributes, attributeClasses] =
     await Promise.all([

apps/web/app/(app)/environments/[environmentId]/(people)/people/page.tsx

@@ -16,7 +16,8 @@ import { Button } from "@formbricks/ui/components/Button";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
 

apps/web/app/(app)/environments/[environmentId]/(people)/segments/page.tsx

@@ -19,7 +19,8 @@ import { getSegments } from "@formbricks/lib/segment/service";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [environment, segments, attributeClasses, organization, product] = await Promise.all([
     getEnvironment(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionClassesTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { type JSX, useState } from "react";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TEnvironment } from "@formbricks/types/environment";
 import { ActionDetailModal } from "./ActionDetailModal";

apps/web/app/(app)/environments/[environmentId]/actions/page.tsx

@@ -23,7 +23,8 @@ export const metadata: Metadata = {
   title: "Actions",
 };
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   const t = await getTranslations();
   const [actionClasses, organization, product] = await Promise.all([
@@ -31,7 +32,7 @@ const Page = async ({ params }) => {
     getOrganizationByEnvironmentId(params.environmentId),
     getProductByEnvironmentId(params.environmentId),
   ]);
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
 
   if (!session) {
     throw new Error(t("common.session_not_found"));

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -481,7 +481,11 @@ export const MainNavigation = ({
                   {dropdownNavigation.map(
                     (link) =>
                       !link.hidden && (
-                        <Link href={link.href} target={link.target} className="flex w-full items-center">
+                        <Link
+                          href={link.href}
+                          target={link.target}
+                          className="flex w-full items-center"
+                          key={link.label}>
                           <DropdownMenuItem>
                             <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                             {link.label}

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/page.tsx

@@ -21,7 +21,8 @@ import { GoBackButton } from "@formbricks/ui/components/GoBackButton";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const isEnabled = !!AIRTABLE_CLIENT_ID;
   const [session, surveys, integrations, environment, attributeClasses] = await Promise.all([
@@ -53,7 +54,7 @@ const Page = async ({ params }) => {
     airtableArray = await getAirtableTables(params.environmentId);
   }
 
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
 
   const currentUserMembership = await getMembershipByUserIdOrganizationId(
     session?.user.id,

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/page.tsx

@@ -24,7 +24,8 @@ import { GoBackButton } from "@formbricks/ui/components/GoBackButton";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const isEnabled = !!(GOOGLE_SHEETS_CLIENT_ID && GOOGLE_SHEETS_CLIENT_SECRET && GOOGLE_SHEETS_REDIRECT_URL);
   const [session, surveys, integrations, environment, attributeClasses] = await Promise.all([
@@ -51,7 +52,7 @@ const Page = async ({ params }) => {
     (integration): integration is TIntegrationGoogleSheets => integration.type === "googleSheets"
   );
 
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
 
   const currentUserMembership = await getMembershipByUserIdOrganizationId(
     session?.user.id,

apps/web/app/(app)/environments/[environmentId]/integrations/notion/page.tsx

@@ -26,7 +26,8 @@ import { GoBackButton } from "@formbricks/ui/components/GoBackButton";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const enabled = !!(
     NOTION_OAUTH_CLIENT_ID &&

apps/web/app/(app)/environments/[environmentId]/integrations/page.tsx

@@ -25,7 +25,8 @@ import { Card } from "@formbricks/ui/components/IntegrationCard";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const environmentId = params.environmentId;
   const t = await getTranslations();
   const [

apps/web/app/(app)/environments/[environmentId]/integrations/slack/page.tsx

@@ -19,7 +19,8 @@ import { GoBackButton } from "@formbricks/ui/components/GoBackButton";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const isEnabled = !!(SLACK_CLIENT_ID && SLACK_CLIENT_SECRET);
   const t = await getTranslations();
   const [session, surveys, slackIntegration, environment, attributeClasses] = await Promise.all([

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTable.tsx

@@ -2,7 +2,7 @@
 
 import { WebhookModal } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookDetailModal";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { type JSX, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TWebhook } from "@formbricks/types/webhooks";

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/page.tsx

@@ -18,7 +18,8 @@ import { GoBackButton } from "@formbricks/ui/components/GoBackButton";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [session, organization, webhooksUnsorted, surveys, environment] = await Promise.all([
     getServerSession(authOptions),

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -15,7 +15,11 @@ import { FormbricksClient } from "../../components/FormbricksClient";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 import { PosthogIdentify } from "./components/PosthogIdentify";
 
-export const EnvLayout = async ({ children, params }) => {
+export const EnvLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session || !session.user) {

apps/web/app/(app)/environments/[environmentId]/page.tsx

@@ -7,7 +7,8 @@ import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   const t = await getTranslations();
   const organization = await getOrganizationByEnvironmentId(params.environmentId);

apps/web/app/(app)/environments/[environmentId]/product/(setup)/app-connection/page.tsx

@@ -12,7 +12,8 @@ import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 import { SettingsCard } from "../../../settings/components/SettingsCard";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [environment, organization] = await Promise.all([
     getEnvironment(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/product/api-keys/loading.tsx

@@ -19,7 +19,7 @@ const LoadingCard = () => {
             <div className="grid h-12 grid-cols-10 content-center rounded-t-lg bg-slate-100 px-6 text-left text-sm font-semibold text-slate-900">
               <div className="col-span-4 sm:col-span-2">{t("common.label")}</div>
               <div className="col-span-4 hidden sm:col-span-5 sm:block">
-                {t("environments.product.api_keys.api_key")}
+                {t("environments.product.api-keys.api_key")}
               </div>
               <div className="col-span-4 sm:col-span-2">{t("common.created_at")}</div>
             </div>

apps/web/app/(app)/environments/[environmentId]/product/api-keys/page.tsx

@@ -17,7 +17,8 @@ import { PageHeader } from "@formbricks/ui/components/PageHeader";
 import { SettingsCard } from "../../settings/components/SettingsCard";
 import { ApiKeyList } from "./components/ApiKeyList";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [session, environment, organization, product] = await Promise.all([
     getServerSession(authOptions),

apps/web/app/(app)/environments/[environmentId]/product/general/page.tsx

@@ -19,7 +19,8 @@ import { DeleteProduct } from "./components/DeleteProduct";
 import { EditProductNameForm } from "./components/EditProductNameForm";
 import { EditWaitingTimeForm } from "./components/EditWaitingTimeForm";
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [product, session, organization] = await Promise.all([
     getProductByEnvironmentId(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/product/languages/page.tsx

@@ -16,7 +16,8 @@ import { getUser } from "@formbricks/lib/user/service";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const product = await getProductByEnvironmentId(params.environmentId);
 

apps/web/app/(app)/environments/[environmentId]/product/layout.tsx

@@ -12,7 +12,11 @@ export const metadata: Metadata = {
   title: "Config",
 };
 
-const ConfigLayout = async ({ children, params }) => {
+const ConfigLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
 
   const [organization, session] = await Promise.all([

apps/web/app/(app)/environments/[environmentId]/product/look/page.tsx

@@ -26,7 +26,8 @@ import { EditFormbricksBranding } from "./components/EditBranding";
 import { EditPlacementForm } from "./components/EditPlacementForm";
 import { ThemeStyling } from "./components/ThemeStyling";
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const [session, organization, product] = await Promise.all([
     getServerSession(authOptions),

apps/web/app/(app)/environments/[environmentId]/product/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 
-const Page = ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   return redirect(`/environments/${params.environmentId}/product/general`);
 };
 

apps/web/app/(app)/environments/[environmentId]/product/tags/page.tsx

@@ -17,7 +17,8 @@ import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 import { EditTagsWrapper } from "./components/EditTagsWrapper";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const environment = await getEnvironment(params.environmentId);
   if (!environment) {

apps/web/app/(app)/environments/[environmentId]/settings/(account)/layout.tsx

@@ -4,7 +4,11 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 
-const AccountSettingsLayout = async ({ children, params }) => {
+const AccountSettingsLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const [organization, product, session] = await Promise.all([
     getOrganizationByEnvironmentId(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/page.tsx

@@ -141,7 +141,9 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
   return memberships;
 };
 
-const Page = async ({ params, searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session) {

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/page.tsx

@@ -15,7 +15,8 @@ import { DeleteAccount } from "./components/DeleteAccount";
 import { EditProfileAvatarForm } from "./components/EditProfileAvatarForm";
 import { EditProfileDetailsForm } from "./components/EditProfileDetailsForm";
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const { environmentId } = params;
   const session = await getServerSession(authOptions);

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -13,7 +13,8 @@ import { Button } from "@formbricks/ui/components/Button";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   if (IS_FORMBRICKS_CLOUD) {
     notFound();

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/lib/membership.ts

@@ -13,7 +13,7 @@ import { DatabaseError, UnknownError } from "@formbricks/types/errors";
 import { TMember, TMembership } from "@formbricks/types/memberships";
 
 export const getMembersByOrganizationId = reactCache(
-  (organizationId: string, page?: number): Promise<TMember[]> =>
+  async (organizationId: string, page?: number): Promise<TMember[]> =>
     cache(
       async () => {
         validateInputs([organizationId, ZString], [page, ZOptionalNumber]);
@@ -135,7 +135,7 @@ export const deleteMembership = async (
 };
 
 export const getMembershipsByUserId = reactCache(
-  (userId: string, page?: number): Promise<TMembership[]> =>
+  async (userId: string, page?: number): Promise<TMembership[]> =>
     cache(
       async () => {
         validateInputs([userId, ZString], [page, ZOptionalNumber]);

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.tsx

@@ -30,7 +30,8 @@ const MembersLoading = () => (
   </div>
 );
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session) {

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/layout.tsx

@@ -4,7 +4,11 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 
-const Layout = async ({ children, params }) => {
+const Layout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   const [organization, product, session] = await Promise.all([
     getOrganizationByEnvironmentId(params.environmentId),

apps/web/app/(app)/environments/[environmentId]/settings/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 
-const Page = ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   return redirect(`/environments/${params.environmentId}/settings/profile`);
 };
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/layout.tsx

@@ -5,10 +5,11 @@ import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
 
 type Props = {
-  params: { surveyId: string; environmentId: string };
+  params: Promise<{ surveyId: string; environmentId: string }>;
 };
 
-export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
+export const generateMetadata = async (props: Props): Promise<Metadata> => {
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   const survey = await getSurvey(params.surveyId);
   const responseCount = await getResponseCountBySurveyId(params.surveyId);

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx

@@ -27,7 +27,8 @@ import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session) {
@@ -72,7 +73,7 @@ const Page = async ({ params }) => {
 
   const isAIEnabled = await getIsAIEnabled(organization);
   const shouldGenerateInsights = needsInsightsGeneration(survey);
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
 
   return (
     <PageContentWrapper>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx

@@ -1,5 +1,6 @@
 import { InboxIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { JSX } from "react";
 import { getQuestionTypes } from "@formbricks/lib/utils/questions";
 import { recallToHeadline } from "@formbricks/lib/utils/recall";
 import { TAttributeClass } from "@formbricks/types/attribute-classes";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/insights.ts

@@ -11,7 +11,12 @@ import { TInsight } from "@formbricks/types/insights";
 import { TSurveyQuestionId, ZSurveyQuestionId } from "@formbricks/types/surveys/types";
 
 export const getInsightsBySurveyIdQuestionId = reactCache(
-  (surveyId: string, questionId: TSurveyQuestionId, limit?: number, offset?: number): Promise<TInsight[]> =>
+  async (
+    surveyId: string,
+    questionId: TSurveyQuestionId,
+    limit?: number,
+    offset?: number
+  ): Promise<TInsight[]> =>
     cache(
       async () => {
         validateInputs([surveyId, ZId], [questionId, ZSurveyQuestionId]);

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary.ts

@@ -883,7 +883,7 @@ export const getQuestionSummary = async (
 };
 
 export const getSurveySummary = reactCache(
-  (surveyId: string, filterCriteria?: TResponseFilterCriteria): Promise<TSurveySummary> =>
+  async (surveyId: string, filterCriteria?: TResponseFilterCriteria): Promise<TSurveySummary> =>
     cache(
       async () => {
         validateInputs([surveyId, ZId], [filterCriteria, ZResponseFilterCriteria.optional()]);

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx

@@ -28,7 +28,8 @@ import { getUser } from "@formbricks/lib/user/service";
 import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper";
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   if (!session) {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 
-const Page = ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   return redirect(`/environments/${params.environmentId}/surveys/${params.surveyId}/summary`);
 };
 

apps/web/app/(app)/environments/[environmentId]/surveys/lib/surveys.ts

@@ -34,7 +34,7 @@ export const surveySelect: Prisma.SurveySelect = {
 };
 
 export const getSurveys = reactCache(
-  (
+  async (
     environmentId: string,
     limit?: number,
     offset?: number,
@@ -87,7 +87,7 @@ export const getSurveys = reactCache(
 );
 
 export const getSurveysSortedByRelevance = reactCache(
-  (
+  async (
     environmentId: string,
     limit?: number,
     offset?: number,
@@ -173,7 +173,7 @@ export const getSurveysSortedByRelevance = reactCache(
 );
 
 export const getSurvey = reactCache(
-  (surveyId: string): Promise<TSurvey | null> =>
+  async (surveyId: string): Promise<TSurvey | null> =>
     cache(
       async () => {
         validateInputs([surveyId, ZId]);

apps/web/app/(app)/environments/[environmentId]/surveys/page.tsx

@@ -27,15 +27,17 @@ export const metadata: Metadata = {
 };
 
 interface SurveyTemplateProps {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
-  searchParams: {
+  }>;
+  searchParams: Promise<{
     role?: TTemplateRole;
-  };
+  }>;
 }
 
-const Page = async ({ params, searchParams }: SurveyTemplateProps) => {
+const Page = async (props: SurveyTemplateProps) => {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const session = await getServerSession(authOptions);
   const product = await getProductByEnvironmentId(params.environmentId);
   const organization = await getOrganizationByEnvironmentId(params.environmentId);

apps/web/app/(auth)/auth/signup/page.tsx

@@ -18,10 +18,11 @@ import {
 } from "@formbricks/lib/constants";
 import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 
-const Page = async ({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) => {
+const Page = async (props: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) => {
+  const searchParams = await props.searchParams;
   const inviteToken = searchParams["inviteToken"] ?? null;
   const isMultOrgEnabled = await getIsMultiOrgEnabled();
-  const locale = findMatchingLocale();
+  const locale = await findMatchingLocale();
   if (!inviteToken && (!SIGNUP_ENABLED || !isMultOrgEnabled)) {
     notFound();
   }

apps/web/app/(auth)/auth/verification-requested/page.tsx

@@ -6,7 +6,8 @@ import { getEmailFromEmailToken } from "@formbricks/lib/jwt";
 
 const VerificationPageSchema = z.string().email();
 
-const Page = async ({ searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
   const t = await getTranslations();
   const email = getEmailFromEmailToken(searchParams.token);
   try {

apps/web/app/(auth)/auth/verify/page.tsx

@@ -2,7 +2,8 @@ import { FormWrapper } from "@/app/(auth)/auth/components/FormWrapper";
 import { SignIn } from "@/app/(auth)/auth/verify/components/SignIn";
 import { getTranslations } from "next-intl/server";
 
-const Page = async ({ searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
   const t = await getTranslations();
   return searchParams && searchParams.token ? (
     <FormWrapper>

apps/web/app/(auth)/invite/page.tsx

@@ -10,7 +10,8 @@ import { getUser, updateUser } from "@formbricks/lib/user/service";
 import { Button } from "@formbricks/ui/components/Button";
 import { ContentLayout } from "./components/ContentLayout";
 
-const Page = async ({ searchParams }) => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
   const t = await getTranslations();
   const session = await getServerSession(authOptions);
   const user = session?.user.id ? await getUser(session.user.id) : null;

apps/web/app/(ee)/(billing)/api/billing/stripe-webhook/route.ts

@@ -4,7 +4,8 @@ import { webhookHandler } from "./lib/stripeWebhook";
 
 export const POST = async (request: Request) => {
   const body = await request.text();
-  const signature = headers().get("stripe-signature") as string;
+  const requestHeaders = await headers();
+  const signature = requestHeaders.get("stripe-signature") as string;
 
   const { status, message } = await webhookHandler(body, signature);
 

apps/web/app/(ee)/(billing)/environments/[environmentId]/settings/(organization)/billing/layout.tsx

@@ -10,7 +10,11 @@ export const metadata: Metadata = {
   title: "Billing",
 };
 
-const BillingLayout = async ({ children, params }) => {
+const BillingLayout = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const t = await getTranslations();
   if (!IS_FORMBRICKS_CLOUD) {
     notFound();

apps/web/app/(ee)/(billing)/environments/[environmentId]/settings/(organization)/billing/page.tsx

@@ -16,7 +16,8 @@ import { PageContentWrapper } from "@formbricks/ui/components/PageContentWrapper
 import { PageHeader } from "@formbricks/ui/components/PageHeader";
 import { PricingTable } from "./components/PricingTable";
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   const t = await getTranslations();
   const organization = await getOrganizationByEnvironmentId(params.environmentId);
   if (!organization) {

apps/web/app/(redirects)/organizations/[organizationId]/route.ts

@@ -9,8 +9,9 @@ import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { getUserProducts } from "@formbricks/lib/product/service";
 import { AuthenticationError, AuthorizationError } from "@formbricks/types/errors";
 
-export const GET = async (_: Request, context: { params: { organizationId: string } }) => {
-  const organizationId = context?.params?.organizationId;
+export const GET = async (_: Request, context: { params: Promise<{ organizationId: string }> }) => {
+  const params = await context?.params;
+  const organizationId = params?.organizationId;
   if (!organizationId) return notFound();
   // check auth
   const session = await getServerSession(authOptions);

apps/web/app/(redirects)/products/[productId]/route.ts

@@ -6,8 +6,9 @@ import { getEnvironments } from "@formbricks/lib/environment/service";
 import { getProduct } from "@formbricks/lib/product/service";
 import { AuthenticationError, AuthorizationError } from "@formbricks/types/errors";
 
-export const GET = async (_: Request, context: { params: { productId: string } }) => {
-  const productId = context?.params?.productId;
+export const GET = async (_: Request, context: { params: Promise<{ productId: string }> }) => {
+  const params = await context?.params;
+  const productId = params.productId;
   if (!productId) return notFound();
   // check auth
   const session = await getServerSession(authOptions);

apps/web/app/[shortUrlId]/page.tsx

@@ -4,7 +4,8 @@ import { notFound, redirect } from "next/navigation";
 import { getShortUrl } from "@formbricks/lib/shortUrl/service";
 import { TShortUrl, ZShortUrlId } from "@formbricks/types/short-url";
 
-export const generateMetadata = async ({ params }): Promise<Metadata> => {
+export const generateMetadata = async (props): Promise<Metadata> => {
+  const params = await props.params;
   if (!params.shortUrlId) {
     notFound();
   }
@@ -27,7 +28,8 @@ export const generateMetadata = async ({ params }): Promise<Metadata> => {
   }
 };
 
-const Page = async ({ params }) => {
+const Page = async (props) => {
+  const params = await props.params;
   if (!params.shortUrlId) {
     notFound();
   }

apps/web/app/api/(internal)/insights/route.ts

@@ -15,8 +15,9 @@ const ZGenerateInsightsInput = z.object({
 
 export const POST = async (request: Request) => {
   try {
+    const requestHeaders = await headers();
     // Check authentication
-    if (headers().get("x-api-key") !== CRON_SECRET) {
+    if (requestHeaders.get("x-api-key") !== CRON_SECRET) {
       return responses.notAuthenticatedResponse();
     }
 

apps/web/app/api/(internal)/pipeline/route.ts

@@ -21,8 +21,9 @@ import { TWebhook } from "@formbricks/types/webhooks";
 import { handleIntegrations } from "./lib/handleIntegrations";
 
 export const POST = async (request: Request) => {
+  const requestHeaders = await headers();
   // Check authentication
-  if (headers().get("x-api-key") !== CRON_SECRET) {
+  if (requestHeaders.get("x-api-key") !== CRON_SECRET) {
     return responses.notAuthenticatedResponse();
   }
 

apps/web/app/api/cron/ping/route.ts

@@ -6,7 +6,7 @@ import { CRON_SECRET } from "@formbricks/lib/constants";
 import { captureTelemetry } from "@formbricks/lib/telemetry";
 
 export const POST = async () => {
-  const headersList = headers();
+  const headersList = await headers();
   const apiKey = headersList.get("x-api-key");
 
   if (!apiKey || apiKey !== CRON_SECRET) {

apps/web/app/api/cron/survey-status/route.ts

@@ -5,7 +5,7 @@ import { CRON_SECRET } from "@formbricks/lib/constants";
 import { surveyCache } from "@formbricks/lib/survey/cache";
 
 export const POST = async () => {
-  const headersList = headers();
+  const headersList = await headers();
   const apiKey = headersList.get("x-api-key");
 
   if (!apiKey || apiKey !== CRON_SECRET) {

apps/web/app/api/cron/weekly-summary/route.ts

@@ -10,8 +10,9 @@ import { getProductsByOrganizationId } from "./lib/product";
 const BATCH_SIZE = 500;
 
 export const POST = async (): Promise<Response> => {
+  const headersList = await headers();
   // Check authentication
-  if (headers().get("x-api-key") !== CRON_SECRET) {
+  if (headersList.get("x-api-key") !== CRON_SECRET) {
     return responses.notAuthenticatedResponse();
   }
 

apps/web/app/api/v1/client/[environmentId]/app/sync/[userId]/route.ts

@@ -27,15 +27,14 @@ export const OPTIONS = async (): Promise<Response> => {
 
 export const GET = async (
   request: NextRequest,
-  {
-    params,
-  }: {
-    params: {
+  props: {
+    params: Promise<{
       environmentId: string;
       userId: string;
-    };
+    }>;
   }
 ): Promise<Response> => {
+  const params = await props.params;
   try {
     const { device } = userAgent(request);
 

apps/web/app/api/v1/client/[environmentId]/displays/route.ts

@@ -6,9 +6,9 @@ import { ZDisplayCreateInput } from "@formbricks/types/displays";
 import { InvalidInputError } from "@formbricks/types/errors";
 
 interface Context {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
+  }>;
 }
 
 export const OPTIONS = async (): Promise<Response> => {
@@ -16,10 +16,11 @@ export const OPTIONS = async (): Promise<Response> => {
 };
 
 export const POST = async (request: Request, context: Context): Promise<Response> => {
+  const params = await context.params;
   const jsonInput = await request.json();
   const inputValidation = ZDisplayCreateInput.safeParse({
     ...jsonInput,
-    environmentId: context.params.environmentId,
+    environmentId: params.environmentId,
   });
 
   if (!inputValidation.success) {

apps/web/app/api/v1/client/[environmentId]/environment/route.ts

@@ -12,14 +12,13 @@ export const OPTIONS = async (): Promise<Response> => {
 
 export const GET = async (
   _: NextRequest,
-  {
-    params,
-  }: {
-    params: {
+  props: {
+    params: Promise<{
       environmentId: string;
-    };
+    }>;
   }
 ): Promise<Response> => {
+  const params = await props.params;
   try {
     // validate using zod
     const inputValidation = ZJsSyncInput.safeParse({

apps/web/app/api/v1/client/[environmentId]/identify/people/[userId]/route.ts

@@ -12,8 +12,9 @@ export const OPTIONS = async (): Promise<Response> => {
 
 export const GET = async (
   request: NextRequest,
-  { params }: { params: { environmentId: string; userId: string } }
+  props: { params: Promise<{ environmentId: string; userId: string }> }
 ): Promise<Response> => {
+  const params = await props.params;
   try {
     const { environmentId, userId } = params;
 

apps/web/app/api/v1/client/[environmentId]/people/[userId]/attributes/route.ts

@@ -13,15 +13,16 @@ export const OPTIONS = async () => {
 
 export const PUT = async (
   req: NextRequest,
-  context: { params: { environmentId: string; userId: string } }
+  context: { params: Promise<{ environmentId: string; userId: string }> }
 ) => {
   try {
-    const environmentId = context.params.environmentId;
+    const params = await context.params;
+    const environmentId = params.environmentId;
     if (!environmentId) {
       return responses.badRequestResponse("environmentId is required", { environmentId }, true);
     }
 
-    const userId = context.params.userId;
+    const userId = params.userId;
     if (!userId) {
       return responses.badRequestResponse("userId is required", { userId }, true);
     }

apps/web/app/api/v1/client/[environmentId]/people/route.ts

@@ -3,9 +3,9 @@ import { NextRequest } from "next/server";
 import { createPerson } from "@formbricks/lib/person/service";
 
 interface Context {
-  params: {
+  params: Promise<{
     environmentId: string;
-  };
+  }>;
 }
 
 export const OPTIONS = async () => {
@@ -17,7 +17,8 @@ export const OPTIONS = async () => {
 export const POST = async (req: NextRequest, context: Context) => {
   // we need to create a new person
   // call the createPerson service from here
-  const environmentId = context.params.environmentId;
+  const params = await context.params;
+  const environmentId = params.environmentId;
   const { userId } = await req.json();
 
   if (!environmentId) {