How to create a starter template for a Next.js app?

The easiest way to get started with a Next.js application is by using create-next-app. This creates an app using the default nextjs template. However, if you want to start a project with some pre-set configurations, you might want to use a custom template. While there are other official nextjs examples, but sometimes you want a template with your custom configurations so in this article you'll learn how to build one for yourself.

TL;DR

1. Create a new Next.js app
2. Add whatever you want to add, basically everything you want your starter to have.
3. Push the changes to a Github repository from where you can install it afterward.

Let's build a starter

1. Create a empty Next.js app
   To get started, we'll need a Next.js app first. Using one of the following commands (depending on your package manager), create a new nextjs app

npx create-next-app next-clean-starter

or

yarn create next-app next-clean-starter

Although you can name your project whatever you want, generally starters are named as next-<NAME_YOU_WANT>-starter

For example, I'll name the starter as next-clean-starter

2. Spin Up the development Server
   After installation, navigate to the project directory and run the following command to start the development server.

npm run dev

or

yarn dev

3. Add your features and configurations
   This is the part where you will be setting up the project, adding features and configurations. For example, I'll add SASS as a dependency so that we can utilize its powers. Also, I'll create few components like a general Layout component along with normal Navbar and Footer components.

Adding SASS

• Install SASS by running:

npm i sass

or

yarn add sass

• Change the extensions of styles from .css to .scss. Also, update the style import statements as well.
• Now you can start using SASS as you'd normally do.

I'm using SASS because I'll be adding a mixin that will handle the responsive media query. I'm not going to explain the implementation details in this article since this is not a SASS tutorial, but you can think of mixins as functions in a programming language that are used to bind together some code that can be used multiple times.

• create a _mixins.scss file inside the styles folder. This will hold all the mixins.

$breakpoint-tablet-width: 640px;
$breakpoint-laptop-width: 1024px;
$breakpoint-desktop-width: 1280px;

@mixin tablet {
  @media screen and (min-width: #{$breakpoint-tablet-width}) {
    @content;
  }
}
@mixin laptop {
  @media screen and (min-width: #{$breakpoint-laptop-width}) {
    @content;
  }
}
@mixin desktop {
  @media screen and (min-width: #{$breakpoint-desktop-width}) {
    @content;
  }
}

• Now, to access the mixins we created in other scss files, at the top of the file add @use 'mixins'; and then you can use the mixin inside the file. For example:

@use 'mixins';

@include mixins.tablet() {
    // styles for screen width starting from minimum 640px
}
@include mixins.laptop() {
    // styles for screen width starting from minimum 1024px
}
@include mixins.desktop() {
    // styles for screen width starting from minimum 1280px
}

Creating Components

• create a components folder at the root of the project directory.
• create 3 new files ~ Footer.js, Layout.js and Navbar.js
• Now create components as you'd normally create in a react application. You can check out the code at Github (links below)

4. Write Documentation
   Now write about your starter in the `README.md` file. Describe its features, how to get started, etc and push all the changes to a public remote git repository.

You can test your starter by running the following command:

npx create-next-app [your-project-name] -e [GitHub URL of the remote git repository]

or

yarn create next-app [your-project-name] -e [GitHub URL of the remote git repository]

📖 Resource

• Github Repository of next-clean-starter