add e2e

Author: sommeeeer

examples/app-pages-router/app/page.tsx examples/app-pages-router/app/home.tsxexamples/app-pages-router/app/page.tsx renamed to examples/app-pages-router/app/home.tsx

@@ -0,0 +1,59 @@
+import Home from "@/app/home";
+import type {
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+  InferGetStaticPropsType,
+} from "next";
+
+const validRootPages = ["conico974", "kheuzy", "sommeeer"];
+
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
+  const rootPaths = validRootPages.map((page) => ({
+    params: { page: [page] },
+  }));
+
+  const paths = [{ params: { page: [] } }, ...rootPaths];
+
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+export async function getStaticProps(context: GetStaticPropsContext) {
+  const page = (context.params?.page as string[]) || [];
+
+  if (page.length === 0) {
+    return {
+      props: {
+        subpage: [],
+        pageType: "home",
+      },
+    };
+  }
+  if (page.length === 1 && validRootPages.includes(page[0])) {
+    return {
+      props: {
+        subpage: page,
+        pageType: "root",
+      },
+    };
+  }
+
+  return { notFound: true };
+}
+
+export default function Page({
+  subpage,
+  pageType,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  if (subpage.length === 0 && pageType === "home") {
+    return <Home />;
+  }
+  return (
+    <div>
+      <h1>{pageType === "home" ? "Homepage" : `Root page: ${subpage}`}</h1>
+      <p>Path: {subpage.join("/")}</p>
+    </div>
+  );
+}

examples/app-pages-router/pages/[[...page]].tsx

@@ -0,0 +1,12 @@
+import { test } from "@playwright/test";
+
+// Going to `/`, `/conico974`, `/kheuzy` and `/sommeeer` should be catched by our `[[...page]]` route.
+test("Optional Catch all route in root should work", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("h1").getByText("App Router").isVisible();
+  await page.locator("h1").getByText("Pages Router").isVisible();
+
+  await page.goto("/conico974");
+  const pElement = page.getByText("Path: conico974", { exact: true });
+  await pElement.isVisible();
+});