Add an option for create-next-app to create a headless API app.

[devjiwonchoi]

What is the update you wish to see?

Add a new option for create-next-app to create a headless API app.

Requirements

1. Add a --api flag for create-next-app to create a headless app.
2. The template should include only the required assets (no public/, app/page.*, etc.).
3. The app should include only the required dependencies (no @types/react, react, etc.).
4. An exemplary usage of the route.js file's built-in features and explanation comments for the users.
   1. Use the HTTP Methods to create a headless API app.
   2. Use the Parameters to validate the request objects (body, search query, etc.).

Things to Consider

1. Which select options should we pass to the users on the initial creation?
2. What would be the "best" practice for a headless API example?
3. Does the app include the required dependencies like react and react-dom?

Bonus

You are welcome to add more features to the headless API app.
For an example, input validation using Zod.

Related Documents

• route.js
• HTTP Methods
• Parameters
• Dynamic Routes

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/create-next-app

Thank you for contributing to Next.js.
We are looking forward to your change and the positive impact it will have on the community!

---

UPDATE 2024AUG22

Expected Specs:

• HTTPS on dev <-- exclude experimental
• CORS
• parameters handling (dynamic param, request, search params)
• Exemplary usage of NextRequest and NextResponse
• 404, 500 status response

If we need a mock API endpoint, we can use https://api.vercel.app (click the link to see the APIs).

[github-actions]

The issue was marked with the good first issue label by a maintainer.

This means that it is a good candidate for someone interested in contributing to the project, but does not know where to start.

To get started, read the Contributing Guide. When you are ready, open a PR and link back to this issue in the form of adding Fixes #1234 to the PR description, where 1234 is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed.

Please remember to add tests to confirm your code changes will fix the issue and we do not regress in the future.

If you have any questions, feel free to ask below or on the PR. Generally, you don't need to @mention anyone directly, as we will get notified anyway and will respond as soon as we can.

Note

There is no need to ask for permission "can I work on this?" Please, go ahead if there is no linked PR 🙂

[devjiwonchoi]

@Arindam200 @ephraimduncan

Thank you all for the PR!
Could you two merge the PRs so we can all collaborate? 😆

[Arindam200]

Hey @devjiwonchoi Sure.

@ephraimduncan Would like to Collaborate with me in my PR?

Then we can work together

[ephraimduncan]

Hi @Arindam200, I've taken a close look at your implementation, and while it's a good start, I believe there might be a more efficient path forward. My PR includes a number of additional features.

It might be more practical to build upon my PR rather than adapting yours. This approach could save us time and effort, while still achieving our goal of providing a robust headless API template. I'm open to incorporating any ideas from you that could further enhance the template.

Perhaps we could discuss which elements from your PR might complement my PR?

[devjiwonchoi]

@ephraimduncan I see you have added some good examples, thank you!

Just to make us keep going, @Arindam200's PR was opened first and already has a review on it, so could @ephraimduncan migrate some of your work to @Arindam200's PR?

#65924 was how we collaborated last time, you can check out how we worked together. 😄

P.S. The credit will go to both of you as a co-author even if @Arindam200's PR is merged!

[Arindam200]

@devjiwonchoi Sure.

That would be great 👍🏼

[ephraimduncan]

That's fine. I'll collaborate with @Arindam200 to get this done

[Tim-Zj]

@ephraimduncan @devjiwonchoi I reviewed your implementation and I think adding an example in the route.js file would better illustrate the usage of the API. May I submit a supplementary PR to add this example?

[devjiwonchoi]

@Tim-Zj You are more than welcome!
@Arindam200 could you add @Tim-Zj to your fork as well? :)

[Arindam200]

Sure thing @devjiwonchoi !

I've invited you @Tim-Zj , Please accept the invite

[Tim-Zj]

Thank you, @devjiwonchoi and @Arindam200! I appreciate the opportunity. I have accepted the invite and will get working on it right away

[Tim-Zj]

@Arindam200 I have added route.js and route.ts . pushed to the feat-headless-api branch. Please review the latest changes. Thank you!

[prashantchothani]

@devjiwonchoi This issue is closed but not documented on create-next-app documentation. Is this in production ? How do we use it as of now so that we do not need to have react and react-dom installed for using nextjs as API ?

[devjiwonchoi]

@prashantchothani Sorry for the late response! The PR is on going at #68130.