feat: Nextjs routing and edge runtime (#226)

Co-authored-by: enicio <jessandro42@gmail.com>
Co-authored-by: José Filho <jc.bsfilho@gmail.com>
Co-authored-by: jotanarciso <joaoznarciso@gmail.com>

Author: 4 people

examples/next/edge-pages-13-4-8/.eslintrc.json examples/next/edge-app-13-5-6-playground/.eslintrc.json

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

examples/next/edge-app-13-5-6-playground/.gitignore

@@ -0,0 +1 @@
+save-exact=true

examples/next/edge-app-13-5-6-playground/.npmrc

@@ -0,0 +1,2 @@
+.next
+pnpm-lock.yaml

examples/next/edge-app-13-5-6-playground/.prettierignore

@@ -0,0 +1,9 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": ["bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

examples/next/edge-app-13-5-6-playground/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.4/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

examples/next/edge-app-13-5-6-playground/.vscode/settings.json

@@ -0,0 +1,33 @@
+# Next.js App Router Playground
+
+Next.js recently introduced the App Router with support for:
+
+- **Layouts:** Easily share UI while preserving state and avoiding re-renders.
+- **Server Components:** Making server-first the default for the most dynamic applications.
+- **Streaming:** Display instant loading states and stream in updates.
+- **Suspense for Data Fetching:** `async`/`await` support and the `use` hook for component-level fetching.
+
+The App Router can coexist with the existing `pages` directory for incremental adoption. While you **don't need to use the App Router** when upgrading to Next.js 13, we're laying the foundations to build complex interfaces while shipping less JavaScript.
+
+## Running Locally
+
+1. Install dependencies:
+
+```sh
+npm i
+```
+
+2. Build with vulcan:
+```
+DEBUG=true NODE_OPTIONS="--max-old-space-size=4096" npx edge-functions@latest build --preset next --mode compute
+```
+
+3. Start the dev server:
+
+```
+DEBUG=true NODE_OPTIONS="--max-old-space-size=4096" npx edge-functions@latest dev
+```
+
+## Documentation
+
+https://nextjs.org/docs

examples/next/edge-app-13-5-6-playground/README.md

@@ -0,0 +1,6 @@
+export type Category = {
+  name: string;
+  slug: string;
+  count: number;
+  parent: string | null;
+};

examples/next/edge-app-13-5-6-playground/app/api/categories/category.d.ts

@@ -0,0 +1,52 @@
+import { notFound } from 'next/navigation';
+import type { Category } from './category';
+
+// `server-only` guarantees any modules that import code in file
+// will never run on the client. Even though this particular api
+// doesn't currently use sensitive environment variables, it's
+// good practise to add `server-only` preemptively.
+import 'server-only';
+
+export async function getCategories({ parent }: { parent?: string } = {}) {
+  const res = await fetch(
+    `https://app-router-api.vercel.app/api/categories${
+      parent ? `?parent=${parent}` : ''
+    }`,
+  );
+
+  if (!res.ok) {
+    // Render the closest `error.js` Error Boundary
+    throw new Error('Something went wrong!');
+  }
+
+  const categories = (await res.json()) as Category[];
+
+  if (categories.length === 0) {
+    // Render the closest `not-found.js` Error Boundary
+    notFound();
+  }
+
+  return categories;
+}
+
+export async function getCategory({ slug }: { slug: string }) {
+  const res = await fetch(
+    `https://app-router-api.vercel.app/api/categories${
+      slug ? `?slug=${slug}` : ''
+    }`,
+  );
+
+  if (!res.ok) {
+    // Render the closest `error.js` Error Boundary
+    throw new Error('Something went wrong!');
+  }
+
+  const category = (await res.json()) as Category;
+
+  if (!category) {
+    // Render the closest `not-found.js` Error Boundary
+    notFound();
+  }
+
+  return category;
+}

examples/next/edge-app-13-5-6-playground/app/api/categories/getCategories.ts

@@ -0,0 +1,37 @@
+export type Product = {
+  id: string;
+  stock: number;
+  rating: number;
+  name: string;
+  description: string;
+  price: Price;
+  isBestSeller: boolean;
+  leadTime: number;
+  image?: string;
+  imageBlur?: string;
+  discount?: Discount;
+  usedPrice?: UsedPrice;
+};
+
+type Price = {
+  amount: number;
+  currency: Currency;
+  scale: number;
+};
+
+type Currency = {
+  code: string;
+  base: number;
+  exponent: number;
+};
+
+type Discount = {
+  percent: number;
+  expires?: number;
+};
+
+type UsedPrice = {
+  amount: number;
+  currency: Currency;
+  scale: number;
+};

examples/next/edge-app-13-5-6-playground/app/api/products/product.d.ts

@@ -0,0 +1,26 @@
+import { notFound } from 'next/navigation';
+import type { Review } from './review';
+
+// `server-only` guarantees any modules that import code in file
+// will never run on the client. Even though this particular api
+// doesn't currently use sensitive environment variables, it's
+// good practise to add `server-only` preemptively.
+import 'server-only';
+
+export async function getReviews() {
+  const res = await fetch(`https://app-router-api.vercel.app/api/reviews`);
+
+  if (!res.ok) {
+    // Render the closest `error.js` Error Boundary
+    throw new Error('Something went wrong!');
+  }
+
+  const reviews = (await res.json()) as Review[];
+
+  if (reviews.length === 0) {
+    // Render the closest `not-found.js` Error Boundary
+    notFound();
+  }
+
+  return reviews;
+}

examples/next/edge-app-13-5-6-playground/app/api/reviews/getReviews.ts

@@ -0,0 +1,6 @@
+export type Review = {
+  id: string;
+  name: string;
+  rating: number;
+  text: string;
+};

examples/next/edge-app-13-5-6-playground/app/api/reviews/review.d.ts

@@ -0,0 +1,26 @@
+import { getCategory } from '#/app/api/categories/getCategories';
+import { Boundary } from '#/ui/boundary';
+import { notFound } from 'next/navigation';
+import { Counter } from '../../context-click-counter';
+
+export default async function Page({
+  params,
+}: {
+  params: { categorySlug: string; subCategorySlug: string };
+}) {
+  const category = await getCategory({ slug: params.subCategorySlug });
+
+  return (
+    <Boundary labels={['Page [Server Component]']} animateRerendering={false}>
+      <div className="space-y-8">
+        <h1 className="text-xl font-medium text-gray-400/80">
+          {category.name}
+        </h1>
+
+        <Counter />
+      </div>
+    </Boundary>
+  );
+}
+
+export const runtime = "experimental-edge";

examples/next/edge-app-13-5-6-playground/app/context/[categorySlug]/[subCategorySlug]/page.tsx

@@ -0,0 +1,36 @@
+import { getCategories, getCategory } from '#/app/api/categories/getCategories';
+import { Boundary } from '#/ui/boundary';
+import { TabGroup } from '#/ui/tab-group';
+import { Counter } from '../context-click-counter';
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { categorySlug: string };
+}) {
+  const category = await getCategory({ slug: params.categorySlug });
+  const categories = await getCategories({ parent: params.categorySlug });
+
+  return (
+    <Boundary labels={['Layout [Server Component]']} animateRerendering={false}>
+      <div className="space-y-9">
+        <TabGroup
+          path={`/context/${category.slug}`}
+          items={[
+            {
+              text: 'All',
+            },
+            ...categories.map((x) => ({
+              text: x.name,
+              slug: x.slug,
+            })),
+          ]}
+        />
+        <Counter />
+        <div>{children}</div>
+      </div>
+    </Boundary>
+  );
+}

examples/next/edge-app-13-5-6-playground/app/context/[categorySlug]/layout.tsx

@@ -0,0 +1,25 @@
+import { getCategory } from '#/app/api/categories/getCategories';
+import { Boundary } from '#/ui/boundary';
+import { Counter } from '../context-click-counter';
+
+export default async function Page({
+  params,
+}: {
+  params: { categorySlug: string };
+}) {
+  const category = await getCategory({ slug: params.categorySlug });
+
+  return (
+    <Boundary labels={['Page [Server Component]']} animateRerendering={false}>
+      <div className="space-y-8">
+        <h1 className="text-xl font-medium text-gray-400/80">
+          All {category.name}
+        </h1>
+
+        <Counter />
+      </div>
+    </Boundary>
+  );
+}
+
+export const runtime = "experimental-edge";

examples/next/edge-app-13-5-6-playground/app/context/[categorySlug]/page.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useCounter } from './counter-context';
+import React from 'react';
+import { Boundary } from '#/ui/boundary';
+
+const ContextClickCounter = () => {
+  const [count, setCount] = useCounter();
+
+  return (
+    <Boundary
+      labels={['Counter Context [Client Component]']}
+      color="blue"
+      size="small"
+      animateRerendering={false}
+    >
+      <button
+        onClick={() => setCount(count + 1)}
+        className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"
+      >
+        {count} Clicks
+      </button>
+    </Boundary>
+  );
+};
+
+export const Counter = () => {
+  const [count] = useCounter();
+
+  return (
+    <Boundary
+      labels={['Counter Context [Client Component]']}
+      color="blue"
+      size="small"
+      animateRerendering={false}
+    >
+      <div className="span text-xl font-bold text-white">
+        <span className="tabular-nums">{count}</span> Clicks
+      </div>
+    </Boundary>
+  );
+};
+
+export default ContextClickCounter;

examples/next/edge-app-13-5-6-playground/app/context/context-click-counter.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import React from 'react';
+
+const CounterContext = React.createContext<
+  [number, React.Dispatch<React.SetStateAction<number>>] | undefined
+>(undefined);
+
+export function CounterProvider({ children }: { children: React.ReactNode }) {
+  const [count, setCount] = React.useState(0);
+  return (
+    <CounterContext.Provider value={[count, setCount]}>
+      {children}
+    </CounterContext.Provider>
+  );
+}
+
+export function useCounter() {
+  const context = React.useContext(CounterContext);
+  if (context === undefined) {
+    throw new Error('useCounter must be used within a CounterProvider');
+  }
+  return context;
+}