Next batch of features

Author: bonifacy1

Diff for: next.config.mjs

@@ -7,6 +7,16 @@ const nextConfig = {
         hostname: 'www.nyc.gov',
       },
     ]
+  },
+  redirects: async () => {
+    return [
+      {
+        source: "/next-config-redirect-missing",
+        destination: "/config-redirect?missing=true",
+        permanent: true,
+        missing: [{ type: "cookie", key: "missing-cookie" }],
+      }
+    ];
   }
 };
 

Diff for: package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "prod": "next build && next start",
     "lint": "next lint"
   },
   "dependencies": {

Diff for: src/app/actions.ts

@@ -0,0 +1,75 @@
+"use server";
+
+const data = {
+  songs: [
+    {
+      "rank": 1,
+      "title": "I'm never gonna give you up",
+      "artist": "Rick Astley",
+      "album": "Hold Me In Your Arms",
+      "year": "1965",
+      "videoId": "dQw4w9WgXcQ"
+    },
+    {
+      "rank": 2,
+      "title": "My Wang",
+      "artist": "Frank Wangnatra",
+      "album": "@franjiewang",
+      "year": "2023",
+      "videoId": "qQzdAsjWGPg"
+    },
+    {
+      "rank": 3,
+      "title": "Excuse me miSST",
+      "artist": "Jay-Air",
+      "album": "@Jayair",
+      "year": "2023",
+      "videoId": "tnDh0JhmaFw"
+    },
+    {
+      "rank": 4,
+      "title": "I don't want another CONSOLE-RRY",
+      "artist": "Dax",
+      "album": "@thxdr",
+      "year": "2023",
+      "videoId": "4JI70_9acgE"
+    }
+  ]
+}
+
+export type Song = (typeof data.songs)[0];
+export type Album = { album: string; artist: string; songs: Song[] };
+const albumsMap: { [key: string]: Song[] } = {};
+
+const albums: Album[] = [];
+data.songs.forEach((s) => {
+  if (!albumsMap[s.album]) {
+    albumsMap[s.album] = [s];
+  } else {
+    albumsMap[s.album].push(s);
+  }
+});
+
+Object.entries(albumsMap).forEach(([key, album]) => {
+  albums.push({
+    album: album[0].album,
+    artist: album[0].artist,
+    songs: album,
+  });
+});
+
+export async function getAlbums() {
+  return albums;
+}
+
+export async function getSongs() {
+  return data.songs;
+}
+
+export async function getSong(album: string, title: string) {
+  return data.songs.find(
+    (song) =>
+      song.album === decodeURIComponent(album) &&
+      song.title === decodeURIComponent(title),
+  );
+}

Diff for: src/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",
+  });
+}

Diff for: src/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,
+  });
+}

Diff for: src/app/api/isr/route.ts

@@ -0,0 +1,32 @@
+import fs from "fs/promises";
+import { NextRequest, NextResponse } from "next/server";
+import path from "path";
+
+export const dynamic = "force-dynamic";
+
+
+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;
+
+
+  // x-prerender-revalidate is a custom header that tells the prerendering service to revalidate the page after the specified number of seconds
+  console.log(`https://${request.headers.get("host")}/render/isr`)
+  const result = await fetch(`http://${request.headers.get("host")}/render/isr`, {
+    headers: { "x-prerender-revalidate": "10" },
+    method: "HEAD",
+  });
+
+  return NextResponse.json({
+    status: 200,
+    body: {
+      result: result.ok,
+      cacheControl: result.headers.get("cache-control"),
+    },
+  });
+}

Diff for: src/app/api/revalidate-tag/route.tsx

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

Diff for: src/app/api/sse/route.tsx

@@ -0,0 +1,52 @@
+import { NextRequest } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+async function wait(n: number = 1000) {
+  return new Promise((res) => {
+    setTimeout(res, n);
+  });
+}
+
+export async function GET(request: NextRequest) {
+  const resStream = new TransformStream();
+  const writer = resStream.writable.getWriter();
+
+  const res = new Response(resStream.readable, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      Connection: "keep-alive",
+      "Cache-Control": "no-cache, no-transform",
+    },
+  });
+
+  setTimeout(async () => {
+    writer.write(
+      `data: ${JSON.stringify({
+        message: "open",
+        time: new Date().toISOString(),
+      })}\n\n`,
+    );
+    for (let i = 1; i <= 4; i++) {
+      await wait(2000);
+      writer.write(
+        `data: ${JSON.stringify({
+          message: "hello:" + i,
+          time: new Date().toISOString(),
+        })}\n\n`,
+      );
+    }
+
+    await wait(2000);
+    writer.write(
+      `data: ${JSON.stringify({
+        message: "close",
+        time: new Date().toISOString(),
+      })}\n\n`,
+    );
+    await wait(5000);
+    await writer.close();
+  }, 100);
+
+  return res;
+}

Diff for: src/app/config/redirect-restination/page.tsx

@@ -0,0 +1,8 @@
+export default async function ISR() {
+  return (
+    <>
+      <h1>return new Date().toISOString();</h1>
+      <div>SSG</div>
+    </>
+  )
+}

Diff for: src/app/config/redirect/page.tsx

@@ -0,0 +1,8 @@
+export default async function ISR() {
+  return (
+    <>
+      <h1>return new Date().toISOString();</h1>
+      <div>SSG</div>
+    </>
+  )
+}

Diff for: src/app/data-fetching/page.tsx

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

Diff for: src/app/data-fetching/server-actions/client.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { useCallback, useState, useTransition } from "react";
+
+import type { Song as SongType } from "../../actions";
+import { getSong } from "../../actions";
+
+
+export default function Client() {
+  const [isPending, startTransition] = useTransition();
+  const [song, setSong] = useState<SongType>();
+
+  const onClick = useCallback(() => {
+    startTransition(async () => {
+      const song = await getSong(
+        "Hold Me In Your Arms",
+        "I'm never gonna give you up",
+      );
+      setSong(song);
+    });
+  }, []);
+
+  return (
+    <div>
+      <button onClick={onClick}>Fire Server Actions</button>
+      {isPending && <div>☎️ing Server Actions...</div>}
+      {song?.artist}
+    </div>
+  );
+}

Diff for: src/app/data-fetching/server-actions/page.tsx

@@ -0,0 +1,10 @@
+import Client from "./client";
+
+export default function Page() {
+  return (
+    <div>
+      <h1>Server Actions</h1>
+      <Client />
+    </div>
+  );
+}

Diff for: src/app/data-fetching/sse/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function SSE() {
+  const [events, setEvents] = useState<any[]>([]);
+
+  useEffect(() => {
+    const e = new EventSource("/api/sse");
+
+    e.onmessage = (msg) => {
+      console.log(msg);
+      try {
+        const data = JSON.parse(msg.data);
+        if (data.message === "close") {
+          e.close();
+          console.log("closing");
+        }
+        setEvents((prev) => prev.concat(data));
+      } catch (err) {
+        console.log("failed to parse: ", err, msg);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <h1>Server Sent Event</h1>
+      {events.map((e, i) => (
+        <div key={i}>
+          Message {i}: {JSON.stringify(e)}
+        </div>
+      ))}
+    </>
+  );
+}

Diff for: src/app/middleware/cookie/page.tsx

@@ -1,10 +1,7 @@
-async function getTime() {
-  return new Date().toISOString();
-}
-
-export const revalidate = 10;
+import Image from "next/image";
 
-export default async function ISR() {
-  const time = getTime();
-  return <div>Time: {time}</div>;
-}
+export default function Redirect() {
+  return (
+    <h1>coockie</h1>
+  );
+}

Diff for: src/app/page.tsx

@@ -66,7 +66,7 @@ export default function Home() {
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
         >
           <h2 className="mb-3 text-2xl font-semibold">
-            Cache
+            Render
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>

Diff for: src/app/render/isr/page.tsx

@@ -0,0 +1,15 @@
+async function getTime() {
+  return new Date().toISOString();
+}
+
+export const revalidate = 10;
+
+export default async function ISR() {
+  const time = getTime();
+  return (
+    <>
+      <h1>export const revalidate = 10;</h1>
+      <div>Time: {time}</div>
+    </>
+  )
+}