Add --api Flag to Create Headless API App with create-next-app

packages/create-next-app/create-app.ts

@@ -37,6 +37,7 @@ export async function createApp({
   skipInstall,
   empty,
   turbo,
+  api,
 }: {
   appPath: string
   packageManager: PackageManager
@@ -51,6 +52,7 @@ export async function createApp({
   skipInstall: boolean
   empty: boolean
   turbo: boolean
+  api?: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
@@ -222,7 +224,7 @@ export async function createApp({
     await installTemplate({
       appName,
       root,
-      template,
+      template: api ? 'app-api' : template,
       mode,
       packageManager,
       isOnline,

packages/create-next-app/index.ts

@@ -57,6 +57,7 @@ const program = new Command(packageJson.name)
     '--import-alias <prefix/*>',
     'Specify import alias to use (default "@/*").'
   )
+  .option('--api', 'Initialize a headless API using the App Router.')
   .option('--empty', 'Initialize an empty project.')
   .option(
     '--use-npm',
@@ -273,7 +274,7 @@ async function run(): Promise<void> {
       }
     }
 
-    if (!opts.eslint && !args.includes('--no-eslint')) {
+    if (!opts.eslint && !args.includes('--no-eslint') && !opts.api) {
       if (skipPrompt) {
         opts.eslint = getPrefOrDefault('eslint')
       } else {
@@ -292,7 +293,7 @@ async function run(): Promise<void> {
       }
     }
 
-    if (!opts.tailwind && !args.includes('--no-tailwind')) {
+    if (!opts.tailwind && !args.includes('--no-tailwind') && !opts.api) {
       if (skipPrompt) {
         opts.tailwind = getPrefOrDefault('tailwind')
       } else {
@@ -330,7 +331,7 @@ async function run(): Promise<void> {
       }
     }
 
-    if (!opts.app && !args.includes('--no-app')) {
+    if (!opts.app && !args.includes('--no-app') && !opts.api) {
       if (skipPrompt) {
         opts.app = getPrefOrDefault('app')
       } else {
@@ -428,6 +429,7 @@ async function run(): Promise<void> {
       skipInstall: opts.skipInstall,
       empty: opts.empty,
       turbo: opts.turbo,
+      api: opts.api,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {

packages/create-next-app/templates/app-api/js/.env.example

@@ -0,0 +1,3 @@
+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"

packages/create-next-app/templates/app-api/js/README-template.md

@@ -0,0 +1,79 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/route.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+## API Routes
+
+This directory contains example API routes for the headless API app.
+
+Here's an overview of the available routes:
+
+1. Root Route (`/`):
+
+   - Provides a list of available API endpoints.
+   - Useful for discovering what the API offers.
+
+2. Pokemon Routes:
+
+   - List all Pokemon (`/pokemon`): Get an overview of available Pokemon.
+   - Filter Pokemon by type (`/pokemon?type=grass`): Find Pokemon of a specific element.
+   - Get a specific Pokemon (`/pokemon/25`): Fetch details about a particular Pokemon by ID.
+
+3. HTTP Methods Route (`/methods`):
+
+   - Information about supported HTTP methods.
+   - Great for learning about various types of API requests.
+
+4. Specific HTTP Method Routes (`/methods/[method]`):
+
+   - Demonstrates different HTTP methods (GET, POST, PUT, DELETE, PATCH).
+   - Helps understand how different types of API requests behave.
+
+5. Not Found Route:
+   - Handles requests to undefined routes.
+   - Returns a "Not Found" response for non-existent endpoints.
+
+Each route is wrapped with middleware that adds:
+
+- Request logging for monitoring and debugging.
+- Origin checking for security.
+- Authentication placeholders for future expansion.
+
+To explore these routes:
+
+1. Start the development server.
+2. Open your browser and navigate to `http://localhost:3000/[route]`.
+3. Examine the responses to understand how each route works.
+
+For more details on the implementation, check the corresponding files in the `app` directory.

packages/create-next-app/templates/app-api/js/app/[...not-found]/route.js

@@ -0,0 +1,3 @@
+export async function GET() {
+  return new Response("Not Found", { status: 404 });
+}

packages/create-next-app/templates/app-api/js/app/methods/[method]/route.js

@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { methods } from "../methods";
+import { withMiddleware } from "@/app/with-middleware";
+
+export const GET = withMiddleware(async (request, context) => {
+  const method = context.params.method.toUpperCase();
+  if (!methods.includes(method)) {
+    return NextResponse.json(
+      { error: `Method ${method} is not supported.` },
+      { status: 404 },
+    );
+  }
+
+  if (method === "GET") {
+    return NextResponse.json({ method: "GET" });
+  }
+
+  const url = request.nextUrl.toString();
+  const res = await fetch(url, { method });
+
+  // if method is HEAD, body is null
+  if (method === "HEAD") {
+    const { ok, statusText, status, body } = res;
+    return NextResponse.json({
+      ok,
+      statusText,
+      status,
+      body,
+    });
+  }
+
+  const data = await res.json();
+  return NextResponse.json(data);
+});
+
+export async function POST() {
+  return NextResponse.json({ method: "POST" });
+}
+
+export async function PUT() {
+  return NextResponse.json({ method: "PUT" });
+}
+
+export async function DELETE() {
+  return NextResponse.json({ method: "DELETE" });
+}
+
+export async function PATCH() {
+  return NextResponse.json({ method: "PATCH" });
+}
+
+export async function OPTIONS() {
+  return NextResponse.json({ method: "OPTIONS" });
+}
+
+export async function HEAD() {
+  return new Response(null, { status: 200 });
+}

packages/create-next-app/templates/app-api/js/app/methods/methods.js

@@ -0,0 +1,9 @@
+export const methods = [
+  "GET",
+  "POST",
+  "PUT",
+  "DELETE",
+  "PATCH",
+  "OPTIONS",
+  "HEAD",
+];

packages/create-next-app/templates/app-api/js/app/methods/route.js

@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+import { methods } from "./methods";
+
+export async function GET(request) {
+  const url = request.nextUrl.toString();
+  const apis = methods.map((method) => {
+    return { path: `${url}/${method}`, description: `${method} method` };
+  });
+
+  return NextResponse.json(apis);
+}

packages/create-next-app/templates/app-api/js/app/pokemon/[number]/route.js

@@ -0,0 +1,11 @@
+import { NextResponse } from "next/server";
+import { withMiddleware } from "@/app/with-middleware";
+
+export const GET = withMiddleware(async (_request, context) => {
+  const res = await fetch(
+    `https://api.vercel.app/pokemon/${context.params.number}`,
+  );
+  const pokemon = await res.json();
+
+  return NextResponse.json(pokemon);
+});

packages/create-next-app/templates/app-api/js/app/pokemon/route.js

@@ -0,0 +1,51 @@
+import { NextResponse } from "next/server";
+import { withMiddleware } from "@/app/with-middleware";
+
+export const GET = withMiddleware(async (request) => {
+  const url = request.nextUrl.toString();
+
+  const { searchParams } = request.nextUrl;
+  const type = searchParams.get("type");
+
+  if (type && !POKEMON_TYPES.includes(type)) {
+    return NextResponse.json(
+      { error: `Invalid type: '${type}'`, types: POKEMON_TYPES },
+      { status: 400 },
+    );
+  }
+
+  const res = await fetch(
+    `https://api.vercel.app/pokemon${type ? `?type=${type}` : ""}`,
+  );
+  const data = await res.json();
+
+  const pokedex = data.map((pokemon) => {
+    return {
+      ...pokemon,
+      url: `${url}/${pokemon.id}`,
+    };
+  });
+
+  return NextResponse.json(pokedex);
+});
+
+const POKEMON_TYPES = [
+  "normal",
+  "fire",
+  "water",
+  "electric",
+  "grass",
+  "ice",
+  "fighting",
+  "poison",
+  "ground",
+  "flying",
+  "psychic",
+  "bug",
+  "rock",
+  "ghost",
+  "dragon",
+  "dark",
+  "steel",
+  "fairy",
+];

packages/create-next-app/templates/app-api/js/app/route.js

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+
+const paths = [
+  { path: "pokemon", description: "gotta catch 'em all!" },
+  { path: "pokemon?type=grass", description: "sort pokemon by grass type" },
+  { path: "pokemon/25", description: "who's that pokemon?" },
+  { path: "methods", description: "list of methods" },
+];
+
+export async function GET(request) {
+  const url = request.nextUrl.toString();
+  const apis = paths.map(({ path, description }) => {
+    return { path: url + path, description };
+  });
+
+  return NextResponse.json(apis, {
+    headers: {
+      // CORS: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#cors
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET",
+    },
+  });
+}

packages/create-next-app/templates/app-api/js/app/with-middleware.js

@@ -0,0 +1,61 @@
+import { NextResponse } from "next/server";
+
+export function withMiddleware(handler) {
+  return async (req, ctx) => {
+    try {
+      console.log(`Middleware: Request to ${req.method} ${req.url}`);
+
+      // Check if the request is coming from an allowed origin
+      if (!isAllowedOrigin(req)) {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+      }
+
+      // Placeholder for authentication logic
+      const isAuthenticated = await checkAuth(req);
+      if (!isAuthenticated) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+      }
+
+      // Call the original handler
+      const result = await handler(req, ctx);
+
+      // Log after executing the handler
+      console.log(`Middleware: Completed ${req.method} ${req.url}`);
+
+      return result;
+    } catch (error) {
+      console.error(
+        `Middleware: Error in route handler: ${req.method} ${req.url}`,
+        error,
+      );
+      return NextResponse.json(
+        { error: "Internal Server Error" },
+        { status: 500 },
+      );
+    }
+  };
+}
+
+function isAllowedOrigin(req) {
+  const referer = req.headers.get("referer");
+  const host = req.headers.get("host");
+
+  // Allow requests from the same origin
+  if (referer && host) {
+    const refererUrl = new URL(referer);
+    return refererUrl.host === host;
+  }
+
+  if (process.env.NODE_ENV === "development" && host?.includes("localhost")) {
+    return true;
+  }
+
+  return false;
+}
+
+async function checkAuth(req) {
+  // Placeholder authentication logic
+  // You can implement your actual auth check here
+  const authToken = req.headers.get("authorization");
+  return true; // For now, always return true
+}