Cara Membuat Starter Template Next.js Ala Kamu Sendiri

Pendahuluan

Baru-baru ini, saya sedang mendalami React & Next.js. Tentunya untuk memperdalam konsep tentang React & Next.js ini saya sedang rajin-rajinnya membuat project iseng menggunakan framework tersebut. Satu hal yang membuat saya sedikit sebal ketika menggunakannya adalah perihal config.

Bermula dari seorang teman yang terlebih dahulu membuat starter template sendiri. Saya pun bertanya-tanya, mengapa dia seniat itu membuatnya? Rupanya, ada statement yang akhirnya membuat saya juga membuat starter template sendiri.

Males cuy. Tiap initiate project baru harus bikin config lagi dari awal berkali-kali. Makanya kepikiran, kenapa gak bikin starter template aja buat diri sendiri, jadi kalo mau buat project baru, tinggal pake template itu aja dan gak pusing config dari awal.

Setelah dipikir lebih lanjut, benar juga ya. Kenapa saya tidak membuat starter template ala saya sendiri untuk mempermudah saya dalam men-develop aplikasi web menggunakan Next.js ini? Mungkin teman-teman pembaca juga akan memikirkan hal ini, hahaha.

Kali ini saya akan coba membagikan cara saya untuk membuat starter template Next.js. Untuk UI component-nya, saya menggunakan Chakra UI, karena inilah UI component yang paling mudah saya pelajari saat ini.

Mari kita mulai!

Inisialisasi Project.

Karena saya tipikal orang yang tidak mau pusing. Jadinya saya menggunakan starter template dasar yang disediakan Next.js yang menggunakan Chakra UI.

Template tersebut bisa dipakai dengan command :

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

Sebelum lanjut lebih jauh, saya menginisiasi dahulu ESLint agar code style yang dipakai nanti bisa konsisten. Hal itu dapat dilakukan dengan menambahkan script untuk mengeksekusi next-lint di package.json. Bisa liat di sini untuk lebih lanjut.

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

Setelah itu, jalankan command yarn lint atau npm run lint untuk menginisiasi file .eslintrc.json. Lalu dalam hal ini, saya lakukan beberapa modifikasi. Berikut isi dari eslintrc.json milik saya. Kalian bisa melakukan beberapa penyesuaian sesuai kebutuhan masing-masing.

{
  "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"]
  }
}
json

Setelah melakukan config ESLint, saya lanjut untuk meng-config Next SEO. Tools ini berguna untuk memodifikasi meta-tag yang biasa digunakan untuk mengoptimasi SEO dan membuat preview web kita.

Pertama-tama, install Next SEO dengan command npm i next-seo. Lalu buat file next-seo.config.js di root folder (folder terluar). Kurang lebih inilah isi darinext-seo.config.js saya, silahkan teman-teman pembaca bisa menyesuaikan dengan kebutuhan.

/** @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

Setting-an dasar selesai, waktunya menyesuaikan folder structure. Sebenarnya struktur folder dari template dasar Next.js ini sudah bagus, namun entah mengapa saya ingin melakukan modifikasi lebih untuk menyesuaikan dengan preferensi saya.

Kurang lebih, inilah struktur folder yang saya miliki.

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

clean

Modifikasi Tampilan Dasar

Saatnya modifikasi tampilan dasar. Di sini saya mungkin tidak akan menjelaskan isi dari kodingannya karena akan sangat panjang. Di tahap ini kalian bisa memodifikasi isi kodingan sesuai dengan kebutuhan kalian masing-masing.

Sebagai contoh, kalian bisa melihat hasil modifikasi tampilan dasar saya di https://github.com/yehezkielgunawan/yehez-nextchakra-starterrr.

Tahap Deploy

Setelah puas dengan tampilan dasar, waktunya deploy kodingan kita ke Github. Untuk cara push project baru ke Github, bisa lihat di sini.

Dalam hal ini, saya menggunakan Vercel sebagai platform hosting saya. Sangat mudah menggunakannya, cukup integrasikan repo Github kita dengan Vercel, maka setiap commit yang telah ada akan dibuild secara otomatis. Untuk detail caranya dapat dilihat di sini.

Setelah semua ter_deploy_, jangan lupa untuk membuat repo Github kita sebagai template publik. Caranya bisa klik Settings -> Options dan centang Template Repository.

VIOLAAA, template anda sudah jadi. Template kalian bisa digunakan dengan cara menjalankan command :

npx degit [Nama repo] <Nama_app>
bash

Contohnya :

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

bash

Jangan lupa untuk install dependencies dengan command npm install atau yarn jika menggunakan cara ini.

Atau.

Kalian bisa menggunakan command bawaan dari Next.js untuk menginisiasi suatu project baru menggunakan template dasar yang kalian buat sendiri. Caranya dengan command:

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

Contohnya:

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

bash

Dengan ini, hidup kalian sedikit dipermudah ketika kalian mau membuat project baru menggunakan Next.js, karena kalian bisa fokus untuk develop saja tanpa pusing memikirkan config dasar yang sebenarnya repetitif dan bisa diatasi dengan menggunakan atau membuat template sendiri.

Ini hasil modifikasi starter template saya sendiri: https://yehez-nextchakra-starter.yehezgun.com///. Bagaimana dengan kalian? Tak perlu terlalu sempurna, yang penting sesuai dengan preferensi kalian dan memudahkan kalian dalam proses development.

Demikian artikel saya untuk kali ini. Mohon maaf kalau bahasa saya masih sangat amatir, maklum baru sekarang-sekarang ini belajar menulis artikel, hahaha. Selamat mencoba dan jangan sungkan-sungkan untuk memberikan feedback di kolom komentar Diskusi.tech agar saya bisa tau bagian mana yang bisa saya improve. Terima kasih.

Referensi : Sozonome NextChakra-starter