Next.js merupakan salah satu framework react.js. Kelebihan dari Next.js adalah kita dapat memilih bagaimana aplikasi kita akan disajikan, apakah menggunakan SSR(server side rendering), SSG(static site generator), atau SPA(single page application) semua sudah disediakan oleh framework Next.js (lebih lanjut).

Nah, kali ini kita akan mencoba SSG di Next.js yang akan membuat static site dan men-deploy-nya ke personal github pages(e.g https://svspicious.github.io) dan kita akan menggunakan github actions untuk automasi proses build dan deploy ke pages kita.

Yang pertama kita harus membuat repo di github dengan nama username.github.io. Misalnya username saya adalah svspicious maka saya akan membuat repo dengan nama svspicious.github.io. Semua file yang terdapat dalam repository tersebut akan dirender/dapat diakses melalui https://svspicious.github.io.

Repository untuk github pages.

Access token diperlukan supaya github actions kita dapat melakukan read/write repository kita.
Caranya menambahkan secret token:

• Buat personal access (baca disini: https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token)
• Centang semua pada bagian repo
• Pada repository kita buka Settings->Secret->New secret
• Pada Secret name masukan TOKEN_SECRET pada kolom value masukan token yang telah dibuat sebelumnya
• Add secret

Membuat token baru

Memasukan token secret ke dalam repository kita

Tentu saja kita butuh aplikasi Next.js yang akan digunakan. Bisa menggunakan project yang sudah ada atau kali ini kita akan membuat project yang baru menggunakan create-next-app. Untuk lebih lanjutnya bisa dibaca di https://nextjs.org/docs/getting-started.

Jalankan perintah dibawah untuk membuat project baru dan ikuti langkah-langkahnya

npx create-next-app
# atau
yarn create next-app
#kemudian
cd nama_project

Contoh, saya menggunakan yarn untuk membuat project bernama raisoturu.github.io maka akan terbuat folder dengan nama yang sama

Membuat project baru menggunakan create-next-app.

Coba jalankan project dengan menggunakan perintah yarn dev atau npm run dev dan buka http://localhost:3000

Tampilan awal aplikasi Next.js yang dibuat menggunakan create-next-app.

Kita memerlukan script untuk men-generate static site dari project kita. Ubah file package.json dan pada bagian scripts tambahkan kode berikut:

"export" : "next build && next export"

Sehingga package.json akan terlihat seperti ini

{
  "name": "raisoturu.github.io",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export" : "next build && next export"
  },
  "dependencies": {
    "next": "9.5.5",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  }
}

Buat file .yml (misal pages.yml) kedalam folder .github/workflows yang berisi kode dibawah

name: Build and Deploy
on:
  push:
    branches: [master]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2

      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: "**/node_modules"
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

      - name: Install 🔧
        run: yarn install

      - name: Build 🔧
        run: |
          yarn export
          touch out/.nojekyll
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN_SECRET }}

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.6.1
        with:
          GITHUB_TOKEN: ${{ secrets.TOKEN_SECRET }}
          BRANCH: production # Nama branch yang akan digunakan.
          FOLDER: out # Folder yang akan dideploy
          CLEAN: true # Hapus file di dalam branch

Sedikit penjelasan tentang kode di atas:

• Actions akan dieksekusi ketika melakukan push ke branch master
• node-version menggunakan node versi 14.x
• Cache node modules, akan melakukan caching untuk modules sehingga proses yarn install akan lebih cepat.
• yarn export Menjalankan script untuk eksport, yang akan membuat folder bernama out yang berisi file static site kita.
• touch out/.nojekyll yang membuat file .nojekyll, INI PENTING! supaya github pages tidak menggunakan jekyll pada repository kita. Jekyll pada github pages akan merusak route Next.js.
• Kita akan menggunakan extension dari JamesIves/github-pages-deploy-action
• secrets.TOKEN_SECRET mengakses secret token yang sudah dibuat sebelumnya. Berfungsi supaya action kita dapat melakukan deployment.
• BRANCH: production, branch yang akan digunakan untuk github pages.

Untuk lebih lanjutnya baca disini

File pages.yml pada project kita

Sekarang tahap preparation sudah selesai, langkah berikutnya adalah commit dan push project kita ke github

git add .
git commit -m "Pesan commit"
git push origin master

Github action akan berjalan ketika kita melakukan push ke branch 'master'

Langkah selanjutnya adalah memilih branch mana yang akan digunakan oleh github pages. Masuk ke repository->Settings->Github pages dan pilih branch production

Github action akan berjalan ketika kita melakukan push ke branch 'master'

Selesai, aplikasi Next.js berhasil di-deploy ke github pages dan dapat diakses melalui https://svspicious.github.io/.

Berhasil di-deploy ke github pages.

Notes

• getServerSideProps() tidak bisa digunakan karena membutuhkan server(SSR).

• Github actions ini juga dapat digunakan untuk CRA, gatsby, dan framework lain seperti vue atau svelte dengan sedikit penyesuaian pada proses build.

Project lain yang saya buat menggunakan Next.js dan dideploy di github pages http://ailabtelkom.github.io/

Berhasil di-deploy ke github pages.

Sekian tutorial Build & Deploy Next.js apps ke personal github pages menggunakaan github action, semoga bermanfaat 😁 .