Build & Deploy Next.js apps ke personal github pages menggunakaan github action

4 min readOct 15, 2020

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:https://nextjs.org/docs/basic-features/data-fetching).

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://raisoturu.github.io) dan kita akan menggunakan github actions untuk automasi proses build dan deploy ke pages kita.

Kenapa harus SSG? github pages hanya bisa merender file html static misalnya index.html atau file markdown yang dirender menggunakan jekyll(https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll). Jadi, kita perlu mengubah project react.js atau Next.js menjadi static file yang bisa di-render oleh github pages.

Prepare github repositories

Yang pertama kita harus membuat repo di github dengan nama username.github.io

Misalnya username saya adalah raisoturu maka saya akan membuat repo dengan nama raisoturu.github.io. Semua file yang terdapat dalam repository tersebut akan dirender/dapat diakses melalui https://raisoturu.github.io.

Setup access token

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

Memasukan token secret ke dalam repository kita

Prepare Next.js application

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.

Export script

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"
  }
}

Setup github actions workflow

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

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.

ribet ya wkwk, baca lebih lanjut disini https://docs.github.com/en/free-pro-team@latest/actions/quickstart

Push to github

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

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

Notes

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

getServerSideProps cannot be used within pages because the method requires a server. Consider using getStaticProps instead. https://nextjs.org/docs/advanced-features/static-html-export

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/

http://ailabtelkom.github.io/ Menggunakan Next.js

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