How to Make Your Own Next.js Starter Template

#javascript #typescript #nextjs #webdev

Introduction

Currently, I'm learning about React & Next.js. To understand how it works, I usually push myself to make some mini-projects using that framework. One thing I hate when I develop a project, it's about config.

It started when I knew a friend who made his own starter template. I asked him, Why do you make it?. He answered, Well I don't need to worry about the 'configuration' thing when I initiate a new project. So I can focus on the development process..

I think it's a great idea. I also don't need to feel anxious about the configuration when I make a new project if I have my own starter template.

Here's how I made my starter template using Next.js and Chakra UI.

Project Initialization

This time, I used the example of base starter template that Next.js provide.

npx create-next-app --example with-chakra-ui-typescript [YOUR_APP_NAME]

Next, I initiated the ESlint config so the code style can be consistent. I added next-lint at package.json and executed it. The details can be seen here.

"scripts": {
  "lint": "next lint"
}

After that, execute the command yarn lint or npm run lint to initiate eslintrc.json. I modified some things due to personal preferences. You also can adapt it with your own preferences.

{
  "env": {
    "node": true
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "import"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_"
      }
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "import/order": [
      "warn",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "complexity": "warn",
    "no-console": ["error"]
  }
}

After finished the ESlint config, I made a Next SEO config. This library is used to modify the meta-tag which is usually used to optimized the SEO and make a preview for the web project.

First, install the Next SEO using npm i next-seo. Then, make next-seo.config.js at the root directory. This is my base configuration. You can accommodate with your own preferences.

/** @type {import('next-seo').DefaultSeoProps} */
const defaultSEOConfig = {
  title: "yehez-nextchakra-starter",
  titleTemplate: "%s | yehez-nextchakra-starter",
  defaultTitle: "yehez-nextchakra-starter",
  description:
    "Yehezkiel Gunawan's personalized Next.js + chakra-ui + TypeScript starter template",
  canonical: "https://yehez-nextchakra-starter.yehezgun.com",
  openGraph: {
    url: "https://yehez-nextchakra-starter.yehezgun.com",
    title: "yehez-nextchakra-starter",
    description: "Next.js + chakra-ui + TypeScript template",
    type: "website",
    images: [
      {
        url: "https://yehez-og-image.yehezgun.com/**yehez-nextchakra-starter**.yehezgun.com.png?theme=dark&md=1&fontSize=50px&images=https%3A%2F%2Fres.cloudinary.com%2Fyehez%2Fimage%2Fupload%2Fv1631970666%2Fyehez_avatar_vkv7pc.png&widths=200&heights=200",
        alt: "yehez-nextchakra-starter.yehezgun.com og-image",
        width: 800,
        height: 600,
      },
    ],
    site_name: "yehez-nextchakra-starter",
  },
  twitter: {
    handle: "@handle",
    site: "@site",
    cardType: "summary_large_image",
  },
  additionalLinkTags: [
    {
      rel: "icon",
      href: "https://res.cloudinary.com/yehez/image/upload/v1630902976/Assassination_Classroom_-_Koro-sensei_smiling_head_fwpndi.svg",
    },
  ],
};

export default defaultSEOConfig;

Folder Structure

The base config is done, now it's time to make the folder structure. Actually the base folder structure from the example template is quite good, but I want some modification here. Here's mine.

/src
    /components
        /layout
        /motion
        /wrapper
    /functions
        /helper
    /pages
    /types

Modify the Base UI

It's time to modify the UI and layout. Maybe I won't explain the whole process here. It will be too long to explain. You can modify the layout by your own option.

Here's my result https://github.com/yehezkielgunawan/yehez-nextchakra-starter.

Deploy

Finally, the final step. Don't forget to push the project to your own repo in Github or Gitlab. You can check here for the details.

I used Vercel as my hosting platform. It's easy to use, you can integrate your repository with Vercel, so every time you push an update, it also re-build the project. Read here for the details.

After deployed, let's make the project as a public template.

Aaaanddd, that's it. You can use the template using this command

npx degit [REPOSITORY NAME] <APP NAME>

Example:

npx degit yehezkielgunawan/yehez-nextchakra-starter test-template

For Next.js you can use the built-in command to initiate a project based on the example template.

npx create-next-app --example [Github Repository Link] <YOUR_APP_NAME>

Example :

npx create-next-app --example https://github.com/yehezkielgunawan/yehez-nextchakra-starter test-template

Your life will be easier with this, so you can focus on the development process every time you initiate a new project, LOL. Congratulations!!!

Here's my own starter template: https://yehez-nextchakra-starter.yehezgun.com/. How about you? Not a perfect one, I know. But at least, it's very helpful for me.

Yeah, that's from me. I'm sorry if there're some typos or mistakes here. I'm still an amateur on making an tech article. Happy trying and you can give some feedback here if you want. Thank you.

Reference: https://github.com/sozonome/nextarter-chakra (Sozonome NextChakra-starter)