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

Deploy SSG Next.js ke github pages.

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.

Repository untuk github pages.

Setup access token

Access token diperlukan supaya github actions kita dapat melakukan read/write repository kita.

Caranya menambahkan secret token:

Membuat token baru
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

File pages.yml pada project kita

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

Pilih branch yang akan digunakan

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

Berhasil di-deploy ke github pages.

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 😁 .

--

--

An ordinary student from Telkom University. Interested in machine learning, web technologies, fall in love with react.js and javascript.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store