test(e2e): import app-router from @opennextjs/aws (#274)

Author: vicb

.gitignore

@@ -2,7 +2,7 @@ node_modules
 .DS_Store
 
 output
-.worker-next
 .open-next
 .wrangler
+.turbo
 dist

examples/e2e/app-router/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+.open-next
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/e2e/app-router/CHANGELOG.md

@@ -0,0 +1,29 @@
+# app-router
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`9595714ac23e5f131b879d04d5cfb2a5d11bdbdd`](https://github.com/opennextjs/opennextjs-aws/commit/9595714ac23e5f131b879d04d5cfb2a5d11bdbdd), [`4e88b47935523de1d15da067b56105bd6be91e47`](https://github.com/opennextjs/opennextjs-aws/commit/4e88b47935523de1d15da067b56105bd6be91e47), [`7140ca56e1e88d7a7cae327eceb3ef8c2fde2a1e`](https://github.com/opennextjs/opennextjs-aws/commit/7140ca56e1e88d7a7cae327eceb3ef8c2fde2a1e)]:
+  - @opennextjs/aws@3.3.1
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`4d328e3fc306b878e9497986baa65bfd1d4de66a`](https://github.com/opennextjs/opennextjs-aws/commit/4d328e3fc306b878e9497986baa65bfd1d4de66a), [`2b2a48b70ae95b5e600ac2e4b7f2df8702c5c26e`](https://github.com/opennextjs/opennextjs-aws/commit/2b2a48b70ae95b5e600ac2e4b7f2df8702c5c26e), [`f685ddea8f8a5c82591dc02713aff7138f2d9896`](https://github.com/opennextjs/opennextjs-aws/commit/f685ddea8f8a5c82591dc02713aff7138f2d9896), [`ef1fe48d570863266c271e5dedaf02b943849ded`](https://github.com/opennextjs/opennextjs-aws/commit/ef1fe48d570863266c271e5dedaf02b943849ded), [`8ab921f8b5bd40c7ba109ccef3e59a6c24283fb2`](https://github.com/opennextjs/opennextjs-aws/commit/8ab921f8b5bd40c7ba109ccef3e59a6c24283fb2), [`2202f36ce0f87357b249bd127cdd5e84d6deffd3`](https://github.com/opennextjs/opennextjs-aws/commit/2202f36ce0f87357b249bd127cdd5e84d6deffd3), [`44392ba82990d43e16a614113d9e7d8e257e5bdd`](https://github.com/opennextjs/opennextjs-aws/commit/44392ba82990d43e16a614113d9e7d8e257e5bdd), [`4dea7ea2f5ffd1848e51502c88d2efcc1896bb8c`](https://github.com/opennextjs/opennextjs-aws/commit/4dea7ea2f5ffd1848e51502c88d2efcc1896bb8c), [`0ac604e5867497cc93fb677b5ebc28ef87e057f8`](https://github.com/opennextjs/opennextjs-aws/commit/0ac604e5867497cc93fb677b5ebc28ef87e057f8), [`1ece6b479bb4e0309892ffbd1200870821a410c4`](https://github.com/opennextjs/opennextjs-aws/commit/1ece6b479bb4e0309892ffbd1200870821a410c4), [`697681bf9ce25212ce4e2e94d886ca425428280d`](https://github.com/opennextjs/opennextjs-aws/commit/697681bf9ce25212ce4e2e94d886ca425428280d)]:
+  - @opennextjs/aws@3.3.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [[`6f798debb575b157acb2f5068658f95ace0fae50`](https://github.com/opennextjs/opennextjs-aws/commit/6f798debb575b157acb2f5068658f95ace0fae50), [`fe600ac6f5e513376cf233a5d2ce68affaa3aa5a`](https://github.com/opennextjs/opennextjs-aws/commit/fe600ac6f5e513376cf233a5d2ce68affaa3aa5a), [`5f0cbc8feac9eec728c27bb3b7ff5c3f3bc26716`](https://github.com/opennextjs/opennextjs-aws/commit/5f0cbc8feac9eec728c27bb3b7ff5c3f3bc26716), [`8b51108d9aee7e5ed3027c1ceda99091b579951d`](https://github.com/opennextjs/opennextjs-aws/commit/8b51108d9aee7e5ed3027c1ceda99091b579951d), [`b999c4e9a38499680bed77ddeb94b62a3301c0fa`](https://github.com/opennextjs/opennextjs-aws/commit/b999c4e9a38499680bed77ddeb94b62a3301c0fa), [`ba84259d2e35e79a562a7e3f055e350a03c9d651`](https://github.com/opennextjs/opennextjs-aws/commit/ba84259d2e35e79a562a7e3f055e350a03c9d651)]:
+  - @opennextjs/aws@3.2.2
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`cf33973f3fbab73e77898fdd072a00a1f037257a`](https://github.com/opennextjs/opennextjs-aws/commit/cf33973f3fbab73e77898fdd072a00a1f037257a), [`77d87e7a870fad6afad022bf75aca18c8656c268`](https://github.com/opennextjs/opennextjs-aws/commit/77d87e7a870fad6afad022bf75aca18c8656c268), [`a43b82b4cb68889371ac8260aefef9e04eefb037`](https://github.com/opennextjs/opennextjs-aws/commit/a43b82b4cb68889371ac8260aefef9e04eefb037), [`bfa1a8c4056bd691fb57617dd6287693e51071b4`](https://github.com/opennextjs/opennextjs-aws/commit/bfa1a8c4056bd691fb57617dd6287693e51071b4), [`5839217411012d1df2874d299daa977ba3701c2c`](https://github.com/opennextjs/opennextjs-aws/commit/5839217411012d1df2874d299daa977ba3701c2c), [`dfc174d88b7bcc54eede09c98d9443dd84b93fd8`](https://github.com/opennextjs/opennextjs-aws/commit/dfc174d88b7bcc54eede09c98d9443dd84b93fd8)]:
+  - @opennextjs/aws@3.2.1

examples/e2e/app-router/README.md

@@ -0,0 +1,3 @@
+# App Router
+
+This project uses the App Router exclusively...

examples/e2e/app-router/app/albums/@modal/(.)[album]/[song]/page.tsx

@@ -0,0 +1,29 @@
+import { getSong } from "@example/shared/api";
+import Modal from "@example/shared/components/Modal";
+
+type Props = {
+  params: Promise<{
+    album: string;
+    song: string;
+  }>;
+};
+export default async function SongPage(props: Props) {
+  const params = await props.params;
+  const song = await getSong(params.album, params.song);
+  return (
+    <Modal>
+      <h1>Modal</h1>
+      Album: {decodeURIComponent(params.album)}
+      <div className="absolute top-1/2 mt-10">
+        {/* <video width={1000} height={1000} autoPlay src={`https://youtube.com/watch?v=${params.song}`} /> */}
+        <iframe
+          width="560"
+          height="315"
+          title={params.song}
+          allowFullScreen
+          src={`https://youtube.com/embed/${song?.videoId}?autoplay=1`}
+        ></iframe>
+      </div>
+    </Modal>
+  );
+}

examples/e2e/app-router/app/albums/@modal/(.)[album]/page.tsx

@@ -0,0 +1,11 @@
+import Modal from "@example/shared/components/Modal";
+
+type Props = {
+  params: Promise<{
+    artist: string;
+  }>;
+};
+export default async function ArtistPage(props: Props) {
+  const params = await props.params;
+  return <Modal>Artists {params.artist}</Modal>;
+}

examples/e2e/app-router/app/albums/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}

examples/e2e/app-router/app/albums/[album]/[song]/page.tsx

@@ -0,0 +1,25 @@
+import { getSong } from "@example/shared/api";
+
+type Props = {
+  params: Promise<{
+    album: string;
+    song: string;
+  }>;
+};
+export default async function Song(props: Props) {
+  const params = await props.params;
+  const song = await getSong(params.album, params.song);
+
+  return (
+    <div>
+      <h1>Not Modal</h1>
+      {decodeURIComponent(params.album)}
+      <iframe
+        width="560"
+        height="315"
+        allowFullScreen
+        src={`https://youtube.com/embed/${song?.videoId}?autoplay=1`}
+      ></iframe>
+    </div>
+  );
+}

examples/e2e/app-router/app/albums/[album]/page.tsx

@@ -0,0 +1,3 @@
+export default function ArtistPage() {
+  return <div>Artist</div>;
+}

examples/e2e/app-router/app/albums/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export default function Layout({ children, modal }: { children: ReactNode; modal: ReactNode }) {
+  return (
+    <div>
+      {children}
+      {modal}
+    </div>
+  );
+}

examples/e2e/app-router/app/albums/page.tsx

@@ -0,0 +1,13 @@
+import { getAlbums } from "@example/shared/api";
+import Album from "@example/shared/components/Album";
+
+export default async function AlbumPage() {
+  const albums = await getAlbums();
+  return (
+    <div>
+      {albums.map((album) => (
+        <Album album={album} />
+      ))}
+    </div>
+  );
+}

examples/e2e/app-router/app/api/after/revalidate/route.ts

@@ -0,0 +1,16 @@
+import { revalidateTag } from "next/cache";
+import { NextResponse, after } from "next/server";
+
+export function POST() {
+  after(
+    () =>
+      new Promise<void>((resolve) =>
+        setTimeout(() => {
+          revalidateTag("date");
+          resolve();
+        }, 5000)
+      )
+  );
+
+  return NextResponse.json({ success: true });
+}

examples/e2e/app-router/app/api/after/ssg/route.ts

@@ -0,0 +1,12 @@
+import { unstable_cache } from "next/cache";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-static";
+
+export async function GET() {
+  const dateFn = unstable_cache(() => new Date().toISOString(), ["date"], {
+    tags: ["date"],
+  });
+  const date = await dateFn();
+  return NextResponse.json({ date });
+}

examples/e2e/app-router/app/api/client/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  return NextResponse.json({
+    hello: "client",
+  });
+}

examples/e2e/app-router/app/api/host/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  return NextResponse.json({
+    url: request.url,
+  });
+}

examples/e2e/app-router/app/api/isr/route.ts

@@ -0,0 +1,27 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+// This endpoint simulates an on demand revalidation request
+export async function GET(request: NextRequest) {
+  const cwd = process.cwd();
+  const prerenderManifest = await fs.readFile(path.join(cwd, ".next/prerender-manifest.json"), "utf-8");
+  const manifest = JSON.parse(prerenderManifest);
+  const previewId = manifest.preview.previewModeId;
+
+  const result = await fetch(`https://${request.headers.get("host")}/isr`, {
+    headers: { "x-prerender-revalidate": previewId },
+    method: "HEAD",
+  });
+
+  return NextResponse.json({
+    status: 200,
+    body: {
+      result: result.ok,
+      cacheControl: result.headers.get("cache-control"),
+    },
+  });
+}

examples/e2e/app-router/app/api/og/route.tsx

@@ -0,0 +1,72 @@
+import { ImageResponse } from "next/og";
+// App router includes @vercel/og.
+// No need to install it.
+// ?title=<title>
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    // ?title=<title>
+    const hasTitle = searchParams.has("title");
+    const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "My default title";
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: "black",
+            backgroundSize: "150px 150px",
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            textAlign: "center",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              justifyItems: "center",
+            }}
+          >
+            <img
+              alt="Vercel"
+              height={200}
+              src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E"
+              style={{ margin: "0 30px" }}
+              width={232}
+            />
+          </div>
+          <div
+            style={{
+              fontSize: 60,
+              fontStyle: "normal",
+              letterSpacing: "-0.025em",
+              color: "white",
+              marginTop: 30,
+              padding: "0 120px",
+              lineHeight: 1.4,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {title}
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  } catch (e: any) {
+    return new Response("Failed to generate the image", {
+      status: 500,
+    });
+  }
+}

examples/e2e/app-router/app/api/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+/**
+ * Make /api/hello call exclusively on the client
+ * - we already know SSR can fetch itself w/o issues
+ */
+export default function Page() {
+  const [data, setData] = useState();
+
+  const onClientClick = useCallback(async () => {
+    const { protocol, host } = window.location;
+    const url = `${protocol}//${host}`;
+    const r = await fetch(`${url}/api/client`);
+    const d = await r.json();
+    setData(d);
+  }, []);
+
+  const onMiddlewareClick = useCallback(async () => {
+    const { protocol, host } = window.location;
+    const url = `${protocol}//${host}`;
+    const r = await fetch(`${url}/api/middleware`);
+    const d = await r.json();
+    setData(d);
+  }, []);
+
+  return (
+    <div>
+      <div>API: {data ? JSON.stringify(data, null, 2) : "N/A"}</div>
+
+      <button className="border p-2" onClick={onClientClick}>
+        Call /api/client
+      </button>
+      <button className="border p-2" onClick={onMiddlewareClick}>
+        Call /api/middleware
+      </button>
+    </div>
+  );
+}

examples/e2e/app-router/app/api/revalidate-path/route.ts

@@ -0,0 +1,9 @@
+import { revalidatePath } from "next/cache";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  revalidatePath("/revalidate-path");
+
+  return new Response("ok");
+}

examples/e2e/app-router/app/api/revalidate-tag/route.ts

@@ -0,0 +1,9 @@
+import { revalidateTag } from "next/cache";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  revalidateTag("revalidate");
+
+  return new Response("ok");
+}