cloudflare · GregBrimble · Nov 17, 2022 · Nov 17, 2022
diff --git a/README.md b/README.md
@@ -9,22 +9,27 @@ Reference:
 
 1. `npx create-next-app@latest my-app`
 
+   Note that if you elect to use eslint, there are a couple of places you need to add return types to make the default template pass the pre-build checks.
+
 1. `cd` into the new directory (e.g. `cd my-app`)
 
 1. `npm install -D @cloudflare/next-on-pages vercel`
 
 1. Configure the project to use the Edge Runtime:
 
-   1. Replace `pages/api/hello.js` with the following:
+   1. Replace `pages/api/hello.ts` with the following:
 
-      ```js
+      ```typescript
       // Next.js Edge API Routes: https://nextjs.org/docs/api-routes/edge-api-routes
+      import type { NextRequest } from "next/server";
 
       export const config = {
         runtime: "experimental-edge",
       };
 
-      export default async function (req) {
+      export default async function handler(
+        req: NextRequest
+      ): Promise<Response> {
         return new Response(JSON.stringify({ name: "John Doe" }), {
           status: 200,
           headers: {
@@ -114,6 +119,82 @@ In one terminal, run `npx @cloudflare/next-on-pages --watch`, and in another `np
 
 ## Examples
 
+### [Next.js 13's `app` Directory](https://beta.nextjs.org/docs/routing/fundamentals#the-app-directory)
+
+Add the following to `next.config.js`:
+
+```diff
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    runtime: "experimental-edge",
+  + appDir: true,
+  },
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;
+```
+
+If you're following the [Next.js 12 → 13 Upgrade Guide](https://beta.nextjs.org/docs/upgrade-guide#step-4-migrating-pages), delete any `./pages/_app.tsx` and `./pages/index.tsx` files and replace with `./app/layout.tsx` and `./app/page.tsx`:
+
+```typescript
+// ./app/layout.tsx
+import "../styles/globals.css";
+import { FC } from "react";
+
+const RootLayout: FC<{
+  children: React.ReactNode;
+}> = ({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}) => {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export default RootLayout;
+```
+
+```typescript
+// ./app/page.tsx
+import { FC } from "react";
+import styles from "../styles/Home.module.css";
+
+const Home = async (): Promise<ReturnType<FC>> => {
+  const uuid = await fetch("https://uuid.rocks/plain").then(
+    async (response) => await response.text()
+  );
+
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{" "}
+          <code className={styles.code}>pages/index.tsx</code>
+        </p>
+
+        <p className={styles.description}>
+          Here&apos;s a server-side UUID:
+          <code className={styles.code}>{uuid}</code>
+        </p>
+      </main>
+    </div>
+  );
+};
+
+export default Home;
+```
+
 ### [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes)
 
 ```typescript

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/next-on-pages",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "bin": "./bin/index.js",
   "scripts": {
     "build": "npx esbuild --bundle --platform=node ./src/index.ts --external:esbuild --external:chokidar --outfile=./dist/index.js"

diff --git a/src/index.ts b/src/index.ts
@@ -378,13 +378,23 @@ const transform = async ({
     }
 
     for (const entry of functionsEntries) {
-      if (`pages/${name}` === entry?.name) {
+      if (
+        `pages/${name}` === entry?.name ||
+        `app${name !== "index" ? `/${name}` : ""}/page` === entry?.name
+      ) {
         hydratedFunctions.set(name, { matchers: entry.matchers, filepath });
       }
     }
   }
 
-  if (hydratedMiddleware.size + hydratedFunctions.size !== functionsMap.size) {
+  const rscFunctions = [...functionsMap.keys()].filter((name) =>
+    name.endsWith(".rsc")
+  );
+
+  if (
+    hydratedMiddleware.size + hydratedFunctions.size !==
+    functionsMap.size - rscFunctions.length
+  ) {
     console.error(
       "⚡️ ERROR: Could not map all functions to an entry in the manifest."
     );

diff --git a/templates/_worker.js/index.ts b/templates/_worker.js/index.ts
@@ -144,7 +144,11 @@ export default {
       let found = false;
       for (const matcher of matchers) {
         if (matcher.regexp) {
-          if (pathname.match(new RegExp(matcher?.regexp))) {
+          const regexp = new RegExp(matcher?.regexp);
+          if (
+            pathname.match(regexp) ||
+            `${pathname}/page`.replace("//page", "/page").match(regexp)
+          ) {
             found = true;
             break;
           }