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

Arindam200 · 2024-07-24T21:15:54Z

What?

Added a new option for create-next-app to create a headless API app. This includes:

Adding a --api flag for create-next-app to create a headless app.
Modifying the template to include only the required assets (no public/, app/page.*, etc.).
Ensuring the app includes only the required dependencies (no @types/react, react, etc.).

Why?

This feature allows users to initialize projects with headless API templates, making it easier to set up projects that require backend functionality without frontend components.

How?

Added the --api flag to the create-next-app command.
Modified the template to exclude unnecessary assets and dependencies.
Included exemplary usage of route.js features with comments for user guidance.
Implemented HTTP Methods and Parameters for request validation.

Closes #68118
Closes NEXT-3633
Closes NDX-120

Signed-off-by: Arindam Majumder <arindammajumder2020@gmail.com>

ijjk · 2024-07-24T21:16:18Z

Allow CI Workflow Run

approve CI run for commit: 513d424

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-07-24T21:16:19Z

Allow CI Workflow Run

approve CI run for commit: cc203c2

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

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

Co-authored-by: Mert Can Altin <mertgold60@gmail.com>

devjiwonchoi

Let's add a few tests at test/integration/create-next-app.

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

packages/create-next-app/index.ts

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

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

Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>

ephraimduncan · 2024-07-27T09:06:30Z

I tried pushing to this but looks like I don't have access. @Arindam200

Arindam200 · 2024-07-27T09:07:32Z

Sure, I'm giving you the access

Arindam200 · 2024-07-27T13:21:25Z

I tried pushing to this but looks like I don't have access. @Arindam200

I've invited you, can you please accept that?

.husky/next.config.ts

packages/create-next-app/index.ts

leerob · 2024-07-30T01:41:10Z

packages/create-next-app/templates/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"


We can likely remove this

The other templates also share this file, should we still remove it?
x-ref: https://github.com/vercel/next.js/blob/canary/packages/create-next-app/templates/app/ts/.env.example

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

packages/create-next-app/templates/api/js/eslintrc.json

packages/create-next-app/templates/api/js/next.config.mjs

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

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>

0xgitx0 · 2024-08-05T23:46:04Z

@devjiwonchoi Hi, I added some ts examples, please take time to review, thanks!

devjiwonchoi · 2024-08-06T02:57:30Z

@Tim-Zj Wow, great work! Will take time to review. Thank you!

test/integration/create-next-app/templates/app-api.test.ts

devjiwonchoi · 2024-08-15T20:05:45Z

@Arindam200 Would you like to take a look at the changes?

samcx

:lfgtm:

Arindam200 · 2024-08-16T06:48:24Z

@Arindam200 Would you like to take a look at the changes?

Sure. I've added some query/feedbacks @devjiwonchoi .

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

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

sujii

Awesome!

This reverts commit e7ac0a4.

leerob · 2024-08-21T19:00:15Z

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

+# Rename this file to `.env.local` to use environment variables locally with `next dev`
+# Add .env files to your .gitignore to prevent accidentally committing sensitive information.
+# https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+MY_HOST="example.com"


Is this used?

huozhi

Some feedbacks on the template @devjiwonchoi

Can we have some tests on Next.js side first to make sure it works in dev and build mode first?
When I look [...not-found]/route.js should not be required, and it's not working as expected when I test against the generated route
with-middleware.js looks a bit confused to me when there's no middleware.js but also need to be applied for each route.
Can we merge the dynamic routes cases between the pokemon/[number] and methods/[method]?

add: headless-api

513d424

Signed-off-by: Arindam Majumder <arindammajumder2020@gmail.com>

ijjk added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Jul 24, 2024

Arindam200 changed the title ~~add: headless-api~~ Add --api Flag to Create Headless API App with create-next-app Jul 24, 2024

Arindam200 added 2 commits July 25, 2024 02:51

add: Readme Templates

63fb471

fix: --api flag

632b11b

mertcanaltin reviewed Jul 25, 2024

View reviewed changes

packages/create-next-app/create-app.ts Outdated Show resolved Hide resolved

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

393b432

Co-authored-by: Mert Can Altin <mertgold60@gmail.com>

devjiwonchoi mentioned this pull request Jul 26, 2024

Add headless api template #68138

Open

devjiwonchoi requested changes Jul 26, 2024

View reviewed changes

Arindam200 and others added 3 commits July 27, 2024 02:20

Update packages/create-next-app/templates/types.ts

76057cd

Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>

Update packages/create-next-app/templates/types.ts

a0742b5

Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>

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

d837d4d

Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>

Arindam200 and others added 6 commits July 27, 2024 23:14

Merge branch 'vercel:canary' into feat-headless-api

f03fde4

rename api to app-api

8eaecc1

Merge branch 'vercel:canary' into feat-headless-api

5af9353

Improve next.config.ts and next.config.mjs for API template

e2e63a1

Add route.js for API routes using App Router

0193596

Merge branch 'vercel:canary' into improve-api-template

7cd19b1

devjiwonchoi mentioned this pull request Jul 29, 2024

Improve api template #68256

Open

0xgitx0 added 2 commits July 29, 2024 09:45

Save current changes

8f3a438

added route.js and route.ts

30d146e

leerob reviewed Jul 30, 2024

View reviewed changes

AhmedBaset reviewed Jul 30, 2024

View reviewed changes

packages/create-next-app/create-app.ts Outdated Show resolved Hide resolved

packages/create-next-app/create-app.ts Outdated Show resolved Hide resolved

devjiwonchoi and others added 2 commits July 30, 2024 13:55

fix: kebab is delicious

945454a

fix kebab

e9a4949

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>

Add cors.ts

31095db

devjiwonchoi added 7 commits August 15, 2024 14:41

add app-api for ts

894d544

readme

93ea629

remove js for now

5752374

js

d290b26

update id to number

6dfb7d5

update

4b45991

add test

906539c

devjiwonchoi reviewed Aug 15, 2024

View reviewed changes

test/integration/create-next-app/templates/app-api.test.ts Show resolved Hide resolved

samcx self-requested a review August 15, 2024 21:28

samcx approved these changes Aug 16, 2024

View reviewed changes

Merge branch 'canary' into feat-headless-api

1db9168

Arindam200 commented Aug 16, 2024

View reviewed changes

packages/create-next-app/templates/app-api/js/app/with-middleware.js Outdated Show resolved Hide resolved

packages/create-next-app/templates/app-api/ts/app/with-middleware.ts Outdated Show resolved Hide resolved

Arindam200 added 3 commits August 16, 2024 12:49

remove NextRequest type

db6c611

add type NextRequest

d6a48aa

Merge branch 'canary' into feat-headless-api

51f1102

sujii approved these changes Aug 16, 2024

View reviewed changes

devjiwonchoi added 3 commits August 22, 2024 02:35

Merge branch 'canary' into feat-headless-api

60a1272

test: remove git diff

e7ac0a4

cannot delete @types/react yet

a32bb60

devjiwonchoi approved these changes Aug 21, 2024

View reviewed changes

Revert "test: remove git diff"

ef2c545

This reverts commit e7ac0a4.

devjiwonchoi requested a review from leerob August 21, 2024 18:29

leerob reviewed Aug 21, 2024

View reviewed changes

huozhi requested changes Aug 22, 2024

View reviewed changes

Merge branch 'canary' into feat-headless-api

cc203c2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Arindam200 commented Jul 24, 2024 •

edited by devjiwonchoi

Loading

ijjk commented Jul 24, 2024 •

edited by samcx

Loading

ijjk commented Jul 24, 2024 •

edited

Loading

devjiwonchoi left a comment

ephraimduncan commented Jul 27, 2024

Arindam200 commented Jul 27, 2024

Arindam200 commented Jul 27, 2024

leerob Jul 30, 2024

devjiwonchoi Jul 31, 2024

0xgitx0 commented Aug 5, 2024

devjiwonchoi commented Aug 6, 2024

devjiwonchoi commented Aug 15, 2024

samcx left a comment

Arindam200 commented Aug 16, 2024 •

edited

Loading

sujii left a comment

leerob Aug 21, 2024

huozhi left a comment

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

Are you sure you want to change the base?

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

Conversation

Arindam200 commented Jul 24, 2024 • edited by devjiwonchoi Loading

What?

Why?

How?

ijjk commented Jul 24, 2024 • edited by samcx Loading

ijjk commented Jul 24, 2024 • edited Loading

devjiwonchoi left a comment

Choose a reason for hiding this comment

ephraimduncan commented Jul 27, 2024

Arindam200 commented Jul 27, 2024

Arindam200 commented Jul 27, 2024

leerob Jul 30, 2024

Choose a reason for hiding this comment

devjiwonchoi Jul 31, 2024

Choose a reason for hiding this comment

0xgitx0 commented Aug 5, 2024

devjiwonchoi commented Aug 6, 2024

devjiwonchoi commented Aug 15, 2024

samcx left a comment

Choose a reason for hiding this comment

Arindam200 commented Aug 16, 2024 • edited Loading

sujii left a comment

Choose a reason for hiding this comment

leerob Aug 21, 2024

Choose a reason for hiding this comment

huozhi left a comment

Choose a reason for hiding this comment

Arindam200 commented Jul 24, 2024 •

edited by devjiwonchoi

Loading

ijjk commented Jul 24, 2024 •

edited by samcx

Loading

ijjk commented Jul 24, 2024 •

edited

Loading

Arindam200 commented Aug 16, 2024 •

edited

Loading