chore: bootstrapping phase

apps/web/app/_not-found.tsx

@@ -0,0 +1,36 @@
+import NotFoundPage from "@pages/404";
+import { cookies, headers } from "next/headers";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+const getProps = async (h: ReturnType<typeof headers>, c: ReturnType<typeof cookies>) => {
+  // @ts-expect-error we cannot access ctx.req in app dir, however headers and cookies are only properties needed to extract the locale
+  const locale = await getLocale({ headers: h, cookies: c });
+
+  const i18n = (await serverSideTranslations(locale)) || "en";
+
+  return {
+    i18n,
+  };
+};
+
+const NotFound = async () => {
+  const h = headers();
+  const c = cookies();
+
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const { i18n } = await getProps(h, c);
+
+  return (
+    // @ts-expect-error withTrpc expects AppProps
+    <PageWrapper requiresLicense={false} pageProps={{ i18n }} nonce={nonce} themeBasis={null} i18n={i18n}>
+      <NotFoundPage />
+    </PageWrapper>
+  );
+};
+
+export default NotFound;

apps/web/app/event-types-1/layout.tsx

@@ -0,0 +1,27 @@
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import { getLayout } from "@calcom/features/MainLayout";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type EventTypesLayoutProps = {
+  children: ReactElement;
+};
+
+export default function EventTypesLayout({ children }: EventTypesLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    // @ts-expect-error withTrpc expects AppProps
+    <PageWrapper
+      getLayout={getLayout}
+      requiresLicense={false}
+      pageProps={children?.props}
+      nonce={nonce}
+      themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/event-types-1/page.tsx

@@ -0,0 +1,18 @@
+import EventTypes from "@pages/event-types";
+import type { Metadata } from "next";
+
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
+
+export const metadata: Metadata = {
+  viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+  metadataBase: new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL),
+  alternates: {
+    canonical: "/event-types",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "@calcom",
+  },
+};
+
+export default EventTypes;

apps/web/middleware.ts

@@ -5,10 +5,14 @@ import { NextResponse } from "next/server";
 
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
+import { csp } from "@lib/csp";
+
 const middleware: NextMiddleware = async (req) => {
   const url = req.nextUrl;
   const requestHeaders = new Headers(req.headers);
 
+  requestHeaders.set("x-url", req.url);
+
   if (!url.pathname.startsWith("/api")) {
     //
     // NOTE: When tRPC hits an error a 500 is returned, when this is received
@@ -32,6 +36,18 @@ const middleware: NextMiddleware = async (req) => {
   }
 
   const res = routingForms.handle(url);
+
+  const { nonce } = csp(req, res ?? null);
+
+  if (!process.env.CSP_POLICY) {
+    req.headers.set("x-csp", "not-opted-in");
+  } else if (!req.headers.get("x-csp")) {
+    // If x-csp not set by gSSP, then it's initialPropsOnly
+    req.headers.set("x-csp", "initialPropsOnly");
+  } else {
+    req.headers.set("x-csp", nonce ?? "");
+  }
+
   if (res) {
     return res;
   }
@@ -74,6 +90,10 @@ export const config = {
      * Paths required by routingForms.handle
      */
     "/apps/routing_forms/:path*",
+
+    // middleware should be executed on each page request, in order to set x-url correctly
+    // matchers above, can be removed
+    "/:path*/",
   ],
 };
 

apps/web/pages/404.tsx

@@ -52,7 +52,7 @@ export default function Custom404() {
   useEffect(() => {
     const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(window.location.host);
     const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/) ?? [];
-    if (routerUsername && (!isValidOrgDomain || !currentOrgDomain)) {
+    if (!isValidOrgDomain || !currentOrgDomain) {
       const splitPath = routerUsername.split("/");
       if (splitPath[1] === "team" && splitPath.length === 3) {
         // Accessing a non-existent team

apps/web/pages/_document.tsx

@@ -20,7 +20,7 @@ function setHeader(ctx: NextPageContext, name: string, value: string) {
 }
 class MyDocument extends Document<Props> {
   static async getInitialProps(ctx: DocumentContext) {
-    const { nonce } = csp(ctx.req || null, ctx.res || null);
+    const { nonce } = csp(ctx.req ?? null, ctx.res ?? null);
     if (!process.env.CSP_POLICY) {
       setHeader(ctx, "x-csp", "not-opted-in");
     } else if (!ctx.res?.getHeader("x-csp")) {

apps/web/pages/auth/forgot-password/[id].tsx

@@ -1,6 +1,5 @@
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import type { CSSProperties } from "react";
 import { useForm } from "react-hook-form";
@@ -9,6 +8,7 @@ import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Button, PasswordField, Form } from "@calcom/ui";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
 
 import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

apps/web/pages/auth/forgot-password/index.tsx

@@ -2,7 +2,6 @@
 import { debounce } from "lodash";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
@@ -11,6 +10,7 @@ import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
 
 import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

apps/web/pages/event-types/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { User } from "@prisma/client";
 import { Trans } from "next-i18next";

apps/web/pages/getting-started/[[...step]].tsx

@@ -1,5 +1,4 @@
 import type { GetServerSidePropsContext } from "next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
 import type { CSSProperties } from "react";
@@ -15,6 +14,7 @@ import prisma from "@calcom/prisma";
 import { trpc } from "@calcom/trpc";
 import { Button, StepCard, Steps } from "@calcom/ui";
 import { Loader } from "@calcom/ui/components/icon";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
 
 import PageWrapper from "@components/PageWrapper";
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";

apps/web/server/lib/serverSideTranslations.ts

@@ -0,0 +1,8 @@
+import { serverSideTranslations as _serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+//@ts-expect-error no type definitions
+import config from "@calcom/web/next-i18next.config";
+
+export const serverSideTranslations: typeof _serverSideTranslations = async (locale, namespaces) => {
+  return _serverSideTranslations(locale, namespaces, config);
+};

apps/web/server/lib/ssg.ts

@@ -1,11 +1,11 @@
 import type { GetStaticPropsContext } from "next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
 import { CALCOM_VERSION } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { i18n } = require("@calcom/config/next-i18next.config");

apps/web/server/lib/ssr.ts

@@ -1,12 +1,12 @@
 import type { GetServerSidePropsContext } from "next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import superjson from "superjson";
 
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
+import { serverSideTranslations } from "@calcom/web/server/lib/serverSideTranslations";
 
 /**
  * Initialize server-side rendering tRPC helpers.

apps/web/tsconfig.json

@@ -5,6 +5,7 @@
     "paths": {
       "~/*": ["modules/*"],
       "@components/*": ["components/*"],
+      "@pages/*": ["pages/*"],
       "@lib/*": ["lib/*"],
       "@server/*": ["server/*"],
       "@prisma/client/*": ["@calcom/prisma/client/*"]

packages/features/MainLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { ComponentProps } from "react";
 import React from "react";
 

packages/lib/server/i18n.ts

@@ -1,6 +1,7 @@
 import i18next from "i18next";
 import { i18n as nexti18next } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import { serverSideTranslations } from "../../../apps/web/server/lib/serverSideTranslations";
 
 export const getTranslation = async (locale: string, ns: string) => {
   const create = async () => {

packages/trpc/server/routers/publicViewer/i18n.handler.ts

@@ -6,7 +6,7 @@ type I18nOptions = {
 
 export const i18nHandler = async ({ input }: I18nOptions) => {
   const { locale } = input;
-  const { serverSideTranslations } = await import("next-i18next/serverSideTranslations");
+  const { serverSideTranslations } = await import("@calcom/web/server/lib/serverSideTranslations");
   const i18n = await serverSideTranslations(locale, ["common", "vital"]);
 
   return {