From ed5525cf352ecb7d53691c80b1a2811193c1f8a5 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 25 Jul 2024 00:17:37 +0000
Subject: [PATCH 1/2] feat: add headless api template

---
 packages/create-next-app/create-app.ts        |  7 +-
 packages/create-next-app/index.ts             | 25 ++++++-
 .../templates/app-empty/ts/eslintrc.json      |  2 +-
 .../templates/headless-api/js/.env.example    |  3 +
 .../templates/headless-api/js/.eslintrc.json  |  3 +
 .../headless-api/js/README-template.md        | 34 ++++++++++
 .../js/app/api/posts/[postsId]/route.js       | 52 ++++++++++++++
 .../headless-api/js/app/api/posts/route.js    | 62 +++++++++++++++++
 .../templates/headless-api/js/gitignore       | 36 ++++++++++
 .../templates/headless-api/js/jsconfig.json   |  7 ++
 .../templates/headless-api/js/next.config.mjs |  4 ++
 .../templates/headless-api/ts/.env.example    |  3 +
 .../templates/headless-api/ts/.eslintrc.json  |  3 +
 .../headless-api/ts/README-template.md        | 34 ++++++++++
 .../ts/app/api/posts/[postsId]/route.ts       | 50 ++++++++++++++
 .../headless-api/ts/app/api/posts/route.ts    | 68 +++++++++++++++++++
 .../templates/headless-api/ts/gitignore       | 36 ++++++++++
 .../templates/headless-api/ts/next-env.d.ts   |  4 ++
 .../templates/headless-api/ts/next.config.ts  |  7 ++
 .../templates/headless-api/ts/tsconfig.json   | 25 +++++++
 packages/create-next-app/templates/index.ts   | 25 +++++--
 packages/create-next-app/templates/types.ts   |  4 +-
 22 files changed, 482 insertions(+), 12 deletions(-)
 create mode 100644 packages/create-next-app/templates/headless-api/js/.env.example
 create mode 100644 packages/create-next-app/templates/headless-api/js/.eslintrc.json
 create mode 100644 packages/create-next-app/templates/headless-api/js/README-template.md
 create mode 100644 packages/create-next-app/templates/headless-api/js/app/api/posts/[postsId]/route.js
 create mode 100644 packages/create-next-app/templates/headless-api/js/app/api/posts/route.js
 create mode 100644 packages/create-next-app/templates/headless-api/js/gitignore
 create mode 100644 packages/create-next-app/templates/headless-api/js/jsconfig.json
 create mode 100644 packages/create-next-app/templates/headless-api/js/next.config.mjs
 create mode 100644 packages/create-next-app/templates/headless-api/ts/.env.example
 create mode 100644 packages/create-next-app/templates/headless-api/ts/.eslintrc.json
 create mode 100644 packages/create-next-app/templates/headless-api/ts/README-template.md
 create mode 100644 packages/create-next-app/templates/headless-api/ts/app/api/posts/[postsId]/route.ts
 create mode 100644 packages/create-next-app/templates/headless-api/ts/app/api/posts/route.ts
 create mode 100644 packages/create-next-app/templates/headless-api/ts/gitignore
 create mode 100644 packages/create-next-app/templates/headless-api/ts/next-env.d.ts
 create mode 100644 packages/create-next-app/templates/headless-api/ts/next.config.ts
 create mode 100644 packages/create-next-app/templates/headless-api/ts/tsconfig.json

diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
index fa53858f359e2..36a7cdd37bd76 100644
--- a/packages/create-next-app/create-app.ts
+++ b/packages/create-next-app/create-app.ts
@@ -37,6 +37,7 @@ export async function createApp({
   skipInstall,
   empty,
   turbo,
+  api,
 }: {
   appPath: string
   packageManager: PackageManager
@@ -51,10 +52,13 @@ export async function createApp({
   skipInstall: boolean
   empty: boolean
   turbo: boolean
+  api: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
-  const template: TemplateType = `${appRouter ? 'app' : 'default'}${tailwind ? '-tw' : ''}${empty ? '-empty' : ''}`
+  const template: TemplateType = api
+    ? 'headless-api'
+    : `${appRouter ? 'app' : 'default'}${tailwind ? '-tw' : ''}${empty ? '-empty' : ''}`
 
   if (example) {
     let repoUrl: URL | undefined
@@ -232,6 +236,7 @@ export async function createApp({
       importAlias,
       skipInstall,
       turbo,
+      api,
     })
   }
 
diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
index 1d068ac42d051..44baeadc24407 100644
--- a/packages/create-next-app/index.ts
+++ b/packages/create-next-app/index.ts
@@ -64,6 +64,7 @@ const program = new Command(packageJson.name)
   Initialize with Tailwind CSS config. (default)
 `
   )
+
   .option(
     '--eslint',
     `
@@ -97,6 +98,13 @@ const program = new Command(packageJson.name)
     `
 
   Specify import alias to use (default "@/*").
+`
+  )
+  .option(
+    '--api',
+    `
+
+  Initialize a Headless API App
 `
   )
   .option(
@@ -345,7 +353,8 @@ async function run(): Promise<void> {
 
     if (
       !process.argv.includes('--tailwind') &&
-      !process.argv.includes('--no-tailwind')
+      !process.argv.includes('--no-tailwind') &&
+      !program.api
     ) {
       if (ciInfo.isCI) {
         program.tailwind = getPrefOrDefault('tailwind')
@@ -387,7 +396,11 @@ async function run(): Promise<void> {
       }
     }
 
-    if (!process.argv.includes('--app') && !process.argv.includes('--no-app')) {
+    if (
+      !process.argv.includes('--app') &&
+      !process.argv.includes('--no-app') &&
+      !program.api
+    ) {
       if (ciInfo.isCI) {
         program.app = getPrefOrDefault('app')
       } else {
@@ -405,7 +418,11 @@ async function run(): Promise<void> {
       }
     }
 
-    if (!program.turbo && !process.argv.includes('--no-turbo')) {
+    if (
+      !program.turbo &&
+      !process.argv.includes('--no-turbo') &&
+      !program.api
+    ) {
       if (ciInfo.isCI) {
         program.turbo = getPrefOrDefault('turbo')
       } else {
@@ -484,6 +501,7 @@ async function run(): Promise<void> {
       skipInstall: program.skipInstall,
       empty: program.empty,
       turbo: program.turbo,
+      api: program.api,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {
@@ -515,6 +533,7 @@ async function run(): Promise<void> {
       skipInstall: program.skipInstall,
       empty: program.empty,
       turbo: program.turbo,
+      api: program.api,
     })
   }
   conf.set('preferences', preferences)
diff --git a/packages/create-next-app/templates/app-empty/ts/eslintrc.json b/packages/create-next-app/templates/app-empty/ts/eslintrc.json
index bffb357a71225..da50efd322250 100644
--- a/packages/create-next-app/templates/app-empty/ts/eslintrc.json
+++ b/packages/create-next-app/templates/app-empty/ts/eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/typescript"
 }
diff --git a/packages/create-next-app/templates/headless-api/js/.env.example b/packages/create-next-app/templates/headless-api/js/.env.example
new file mode 100644
index 0000000000000..ce586fad292cd
--- /dev/null
+++ b/packages/create-next-app/templates/headless-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"
diff --git a/packages/create-next-app/templates/headless-api/js/.eslintrc.json b/packages/create-next-app/templates/headless-api/js/.eslintrc.json
new file mode 100644
index 0000000000000..bffb357a71225
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/packages/create-next-app/templates/headless-api/js/README-template.md b/packages/create-next-app/templates/headless-api/js/README-template.md
new file mode 100644
index 0000000000000..f27322c2fd382
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/README-template.md
@@ -0,0 +1,34 @@
+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/page.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.
diff --git a/packages/create-next-app/templates/headless-api/js/app/api/posts/[postsId]/route.js b/packages/create-next-app/templates/headless-api/js/app/api/posts/[postsId]/route.js
new file mode 100644
index 0000000000000..d94cc592ce37d
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/app/api/posts/[postsId]/route.js
@@ -0,0 +1,52 @@
+// Helper function to validate post data
+function validatePostData(data) {
+  return (
+    typeof data.title === "string" &&
+    typeof data.content === "string" &&
+    typeof data.authorId === "string"
+  );
+}
+
+// GET: Retrieve a post by ID
+export async function GET(request, { params }) {
+  const postId = params.postId;
+
+  // In a real app, you'd fetch the post from a database
+  const post = {
+    id: postId,
+    title: "Sample Post",
+    content: "This is a sample post content.",
+    authorId: "author123",
+    createdAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(post);
+}
+
+// PUT: Update an existing post
+export async function PUT(request, { params }) {
+  const postId = params.postId;
+  const data = await request.json();
+
+  if (!validatePostData(data)) {
+    return NextResponse.json({ error: "Invalid post data" }, { status: 400 });
+  }
+
+  // In a real app, you'd update the post in a database
+  const updatedPost = {
+    id: postId,
+    ...data,
+    updatedAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(updatedPost);
+}
+
+// DELETE: Remove a post
+export async function DELETE(request, { params }) {
+  const postId = params.postId;
+
+  // In a real app, you'd delete the post from a database
+  // Here, we'll just return a success message
+  return NextResponse.json({ message: `Post ${postId} deleted successfully` });
+}
diff --git a/packages/create-next-app/templates/headless-api/js/app/api/posts/route.js b/packages/create-next-app/templates/headless-api/js/app/api/posts/route.js
new file mode 100644
index 0000000000000..a9985e3e35939
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/app/api/posts/route.js
@@ -0,0 +1,62 @@
+// Helper function to validate post data
+function validatePostData(data) {
+  return (
+    typeof data.title === "string" &&
+    typeof data.content === "string" &&
+    typeof data.authorId === "string"
+  );
+}
+
+// GET: Retrieve all posts
+export async function GET() {
+  const posts = [
+    {
+      id: "1",
+      title: "First Post",
+      content: "Content of the first post",
+      authorId: "author123",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "2",
+      title: "Second Post",
+      content: "Content of the second post",
+      authorId: "author456",
+      createdAt: new Date().toISOString(),
+    },
+  ];
+
+  return NextResponse.json({
+    posts,
+    total: posts.length,
+  });
+}
+
+// POST: Create a new post
+export async function POST(request) {
+  const data = await request.json();
+
+  if (!validatePostData(data)) {
+    return NextResponse.json({ error: "Invalid post data" }, { status: 400 });
+  }
+
+  const newPost = {
+    id: Date.now().toString(),
+    ...data,
+    createdAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(newPost, { status: 201 });
+}
+
+// OPTIONS: Handle preflight requests
+export async function OPTIONS(request) {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    },
+  });
+}
diff --git a/packages/create-next-app/templates/headless-api/js/gitignore b/packages/create-next-app/templates/headless-api/js/gitignore
new file mode 100644
index 0000000000000..fd3dbb571a12a
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.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
diff --git a/packages/create-next-app/templates/headless-api/js/jsconfig.json b/packages/create-next-app/templates/headless-api/js/jsconfig.json
new file mode 100644
index 0000000000000..2a2e4b3bf8ba1
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
diff --git a/packages/create-next-app/templates/headless-api/js/next.config.mjs b/packages/create-next-app/templates/headless-api/js/next.config.mjs
new file mode 100644
index 0000000000000..4678774e6d606
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/js/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/packages/create-next-app/templates/headless-api/ts/.env.example b/packages/create-next-app/templates/headless-api/ts/.env.example
new file mode 100644
index 0000000000000..ce586fad292cd
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/.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"
diff --git a/packages/create-next-app/templates/headless-api/ts/.eslintrc.json b/packages/create-next-app/templates/headless-api/ts/.eslintrc.json
new file mode 100644
index 0000000000000..bffb357a71225
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/packages/create-next-app/templates/headless-api/ts/README-template.md b/packages/create-next-app/templates/headless-api/ts/README-template.md
new file mode 100644
index 0000000000000..90f181fe120aa
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/README-template.md
@@ -0,0 +1,34 @@
+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/page.tsx`. 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.
diff --git a/packages/create-next-app/templates/headless-api/ts/app/api/posts/[postsId]/route.ts b/packages/create-next-app/templates/headless-api/ts/app/api/posts/[postsId]/route.ts
new file mode 100644
index 0000000000000..655394dfb6528
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/app/api/posts/[postsId]/route.ts
@@ -0,0 +1,50 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+// Helper function to validate post data
+function validatePostData(data: { title: string; content: string; authorId: string }): boolean {
+  return typeof data.title === "string" && typeof data.content === "string" && typeof data.authorId === "string";
+}
+
+// GET: Retrieve a post by ID
+export async function GET(request: NextRequest, { params }: { params: { postId: string } }) {
+  const postId = params.postId;
+
+  // In a real app, you'd fetch the post from a database
+  const post = {
+    id: postId,
+    title: "Sample Post",
+    content: "This is a sample post content.",
+    authorId: "author123",
+    createdAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(post);
+}
+
+// PUT: Update an existing post
+export async function PUT(request: NextRequest, { params }: { params: { postId: string } }) {
+  const postId = params.postId;
+  const data = await request.json();
+
+  if (!validatePostData(data)) {
+    return NextResponse.json({ error: "Invalid post data" }, { status: 400 });
+  }
+
+  // In a real app, you'd update the post in a database
+  const updatedPost = {
+    id: postId,
+    ...data,
+    updatedAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(updatedPost);
+}
+
+// DELETE: Remove a post
+export async function DELETE(request: NextRequest, { params }: { params: { postId: string } }) {
+  const postId = params.postId;
+
+  // In a real app, you'd delete the post from a database
+  // Here, we'll just return a success message
+  return NextResponse.json({ message: `Post ${postId} deleted successfully` });
+}
diff --git a/packages/create-next-app/templates/headless-api/ts/app/api/posts/route.ts b/packages/create-next-app/templates/headless-api/ts/app/api/posts/route.ts
new file mode 100644
index 0000000000000..e462b92f0eb64
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/app/api/posts/route.ts
@@ -0,0 +1,68 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+// Helper function to validate post data
+function validatePostData(data: {
+  title: string;
+  content: string;
+  authorId: string;
+}): boolean {
+  return (
+    typeof data.title === "string" &&
+    typeof data.content === "string" &&
+    typeof data.authorId === "string"
+  );
+}
+
+// GET: Retrieve all posts
+export async function GET() {
+  const posts = [
+    {
+      id: "1",
+      title: "First Post",
+      content: "Content of the first post",
+      authorId: "author123",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "2",
+      title: "Second Post",
+      content: "Content of the second post",
+      authorId: "author456",
+      createdAt: new Date().toISOString(),
+    },
+  ];
+
+  return NextResponse.json({
+    posts,
+    total: posts.length,
+  });
+}
+
+// POST: Create a new post
+export async function POST(request: NextRequest) {
+  const data = await request.json();
+
+  if (!validatePostData(data)) {
+    return NextResponse.json({ error: "Invalid post data" }, { status: 400 });
+  }
+
+  const newPost = {
+    id: Date.now().toString(),
+    ...data,
+    createdAt: new Date().toISOString(),
+  };
+
+  return NextResponse.json(newPost, { status: 201 });
+}
+
+// OPTIONS: Handle preflight requests
+export async function OPTIONS(request: NextRequest) {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    },
+  });
+}
diff --git a/packages/create-next-app/templates/headless-api/ts/gitignore b/packages/create-next-app/templates/headless-api/ts/gitignore
new file mode 100644
index 0000000000000..fd3dbb571a12a
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.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
diff --git a/packages/create-next-app/templates/headless-api/ts/next-env.d.ts b/packages/create-next-app/templates/headless-api/ts/next-env.d.ts
new file mode 100644
index 0000000000000..2532e77aba8ca
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/next-env.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="next" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/create-next-app/templates/headless-api/ts/next.config.ts b/packages/create-next-app/templates/headless-api/ts/next.config.ts
new file mode 100644
index 0000000000000..e9ffa3083ad27
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/packages/create-next-app/templates/headless-api/ts/tsconfig.json b/packages/create-next-app/templates/headless-api/ts/tsconfig.json
new file mode 100644
index 0000000000000..70991e5bd7c98
--- /dev/null
+++ b/packages/create-next-app/templates/headless-api/ts/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
index 1d54f8ae0e63c..a992bf7a96989 100644
--- a/packages/create-next-app/templates/index.ts
+++ b/packages/create-next-app/templates/index.ts
@@ -40,6 +40,7 @@ export const installTemplate = async ({
   importAlias,
   skipInstall,
   turbo,
+  api,
 }: InstallTemplateArgs) => {
   console.log(bold(`Using ${packageManager}.`));
 
@@ -184,13 +185,19 @@ export const installTemplate = async ({
      * Default dependencies.
      */
     dependencies: {
-      react: "19.0.0-rc.0",
-      "react-dom": "19.0.0-rc.0",
       next: version,
     },
     devDependencies: {},
   };
 
+  if (!api) {
+    packageJson.dependencies = {
+      ...packageJson.dependencies,
+      react: "19.0.0-rc.0",
+      "react-dom": "19.0.0-rc.0",
+    };
+  }
+
   /**
    * TypeScript projects will have type definitions and other devDependencies.
    */
@@ -198,14 +205,20 @@ export const installTemplate = async ({
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
       typescript: "^5",
-      "@types/node": "^20",
-      "@types/react": "^18",
-      "@types/react-dom": "^18",
     };
+
+    if (!api) {
+      packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+      };
+    }
   }
 
   /* Add Tailwind CSS dependencies. */
-  if (tailwind) {
+  if (tailwind && !api) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
       postcss: "^8",
diff --git a/packages/create-next-app/templates/types.ts b/packages/create-next-app/templates/types.ts
index 1837495ab8a08..85e1357f9a841 100644
--- a/packages/create-next-app/templates/types.ts
+++ b/packages/create-next-app/templates/types.ts
@@ -8,7 +8,8 @@ export type TemplateType =
   | "default"
   | "default-empty"
   | "default-tw"
-  | "default-tw-empty";
+  | "default-tw-empty"
+  | "headless-api";
 export type TemplateMode = "js" | "ts";
 
 export interface GetTemplateFileArgs {
@@ -30,4 +31,5 @@ export interface InstallTemplateArgs {
   importAlias: string;
   skipInstall: boolean;
   turbo: boolean;
+  api: boolean;
 }

From d836ec2cd3726f5b43d3b09bc8cad7040b3c68be Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 25 Jul 2024 00:19:27 +0000
Subject: [PATCH 2/2] chore: update readme

---
 .../templates/headless-api/js/README-template.md                | 2 +-
 .../templates/headless-api/ts/README-template.md                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/create-next-app/templates/headless-api/js/README-template.md b/packages/create-next-app/templates/headless-api/js/README-template.md
index f27322c2fd382..fe675a1d2accb 100644
--- a/packages/create-next-app/templates/headless-api/js/README-template.md
+++ b/packages/create-next-app/templates/headless-api/js/README-template.md
@@ -16,7 +16,7 @@ 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/page.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/api/posts/route.js`. The page auto-updates as you edit the file.
 
 ## Learn More
 
diff --git a/packages/create-next-app/templates/headless-api/ts/README-template.md b/packages/create-next-app/templates/headless-api/ts/README-template.md
index 90f181fe120aa..812dffc91ce5f 100644
--- a/packages/create-next-app/templates/headless-api/ts/README-template.md
+++ b/packages/create-next-app/templates/headless-api/ts/README-template.md
@@ -16,7 +16,7 @@ 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/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/api/posts/route.ts`. The page auto-updates as you edit the file.
 
 ## Learn More