create-next-app with template

Introduction

When developing a web application, the technologies used may vary each time, but there are always certain configurations that developers tend to use. For example, I use i18n for multilingual support and React Query for API caching. Setting up a project from scratch can often take more time than expected, but by templating these configurations in advance, you can save time and reduce initial trial and error.

How to Use

If you are using Next.js, you may be familiar with the create-next-app command, as it is a feature provided in the official documentation. This command allows you to easily set up project settings such as project name and TypeScript usage.

npx create-next-app

Furthermore, by carefully reading the documentation, you can find the example option that I will discuss today.

By including the repo URL as an option, it will configure the project accordingly. By pushing commonly used configurations to Github in advance and entering the repo's URL, you can save time.

Usage Example

Although it is a simple feature, it is particularly useful for developers like me who constantly create small projects. Next.js also provides multiple templates here. You can create templates in the following format.

Format

npx create-next-app -e <Github URL>

Example

npx create-next-app -e https://github.com/danver-io/template-danver-web

Going Further

While this is sufficient, if you happen to have multiple templates, there is a good method. By looking at the official Repo, you will see that there are multiple templates within a single Repo. Create a template repo on Github and add your own templates to each folder. For example, you can create many templates such as SPA (Single Page Application), Mobile App, etc. In this case, you can add the --example-path [path-to-example] option.