Tutorial NextJS #1 : Menginstall dan Mengenal Routing di nextJS

di tutorial kali ini, kita akan sama — sama belajar tentang nextJS, kebetulan saya sedang membangun pilot project menggunakan nextJS dan terpaksa harus belajar. nah dari pada ilmunya cuma kesimpan di otak mending di tuangkan ke tulisan.

tujuan artikel ini

• memahami apa itu nextJS
• memahami struktur file pada nextJS
• mengerti cara kerja routing pada nextJS

Apa itu NextJS ?

kalau teman — teman buka website resmi nextjs, dengan sangt jelas di katakan bahwa nextjs adalah react framework , ya next js adalah react versi server. jika react yang pada dasarnya semua componennya di render di sisi client dengan menggunakan nextJS maka componentnya akan di render di sisi server kemudian akan di kirimkan ke client dalam bentuk HTML.

nextjs.org

Cara kerja NextJS hampir sama persis seperti React pada umumnya, dan fitur — fitur unggulan reactJS seperti Hook, Redux dan lain lain itu juga bisa di implement di NextJS.

kalau sama dengan ReactJS ngapain pakek NextJS? kenapa gak langsung react aja!

kalau bagi saya pribadi salah satu alasan kenapa pakek NextJS karena server side rendering karena beberapa project saya butuh SEO yang lebih baik menggunakan server side rendering meskipun google bot sebenarnya sudah bisa crawling react. selain itu ada banyak hal yang membuat nextJS menjadi lebih simple dan mudah dari pada react. bahkan di salah satu video di youtube menyebutkan bahwa NextJS menyelesaikan semua masalah yang ada di reactJS.

wew, pasti ada yang tidak setuju. ya inilah hidup tidak selalu seperti yang kamu inginkan.

yasudah, mukaddimahnya sudah cukup jangan terlalu panjang. kita masuk ke acara kita pada hari ini belajar nextJS.

Section 1 : Install NextJS

ada beberapa cara yang bisa di gunakan untuk install nextJS, misalnya dengan cara menginstall manual satu per satu package yang di butuhkan nextJS seperti berikut :

npm install next react react-dom
# atau
yarn add next react react-dom

tapi cara di atas tidak canggih, saya lebih prefer menggunakan cara yang lebih dengan cara menggunakancreate-next-app

npx create-next-app belajar-react

belajar-react adalah nama folder yang ingin kita gunakan. jika sukses hasilnya akan seperti berikut :

jika sudah berhasil install maka seharusnya sekarang code nextjs sudah ada di folder belajar-nextjsseperti berikut

Section 2 : Struktur File NextJS

nextJS memiliki aturan sendiri untuk structur file,

• pages
  folder pages sedikit lebih spesial dari folder lainnya. struktur folder dan file dalam folder pages merupakan routing untuk nextJS. kita akan bicarakan ini lebih lanjut di section routing nanti.
• public
  folder public berfungsi untuk menyimpan file static, seperti icon, image dan lain, folder public merupakan root dari project nextJS dengan kata lain jika ada file gambar.jpg dalam folder public maka kita langsung bisa mengakses dengan host:port/gambar.jpg
• style
  seperti pada umumnya style merupakan tempat prnyimpan css dan hal — hal yang berhubungan dengan styling.
• pages/api
  jika kalian buka folder pages maka akan ada folder api, nah folder api ini merupakan folder default untuk membuat RestAPI di NextJS, ini salah satu hal yang saya suka dari nextJS, di satu project kita bisa langsung membuat API, konek ke database dan hal hal lain yang seharusnya di lakuakn oleh backend.

Section 3 : Migrasi NextJS ke Typescript

kenapa harus typescript? suka — suka saya dong, kan yang buat artikel ini saya. wkwk, kita akan sharing di artikel lain nanti kena saya lebih refer untuk menggunakan typescript dari pada javascript.

seperti Package terkenal lainnya, NextJS juga sudah support typeScript, tetapi secara default NextJS masih menggunakan untuk javaScript.

untuk mengubah project NextJS kita ke typeScript caranya cukup simpel,

1. ubah file .js yang ada di foler pages ke .tsx kemudian ubah file .jsyang ada di dalam folder pages/api ke ts.
2. install typescript dan type untuk node dan react npm install typescript @types/node @types/react --save-dev
   kenapa --save-dev karena kita tidak membutuhkan ini di production.
3. jika berhasil sekarang install package di atas sekarang jalankan npm run dev

NextJS langsung mendeteksi bahwa kita menggunakan typescript, dan langsung membuatkan kita file tsconfig.json dan next-env.d.ts , luar biasa bukan? nextJS sangat pengertian seperti wanita idaman.

sekarang coba buka localhost:3000 dari browser kalian, dan tadaaaaa nextJS sudah jalan di local kalian sekarang.

Section 4 : NextJS Routing

berbeda dengan framework pada umumnya yang memiliki file route untuk mengatur routing, di nextJS routing di atur dengan menggunakan struktur hierarki folder pages, ini akan sedikit membingukan ketika kita baru — baru menggunakan cara seperti ini.

ketika kita membuat localhost:3000 itu halaman yang kalian liat di browser kalian adalah hasil proses dari file index.tsx dalam folder pages.

nah, jika kita menambah file baru dengan nama halaman.tsx di dalam folder pages maka kita dapat mengakses dengan localhost:3000/halaman.

jika kita menambah folder baru dengan nama company di dalam folder pages ketika kita buka localhost:3000/company akan mendapat error 404. kenapa? karena untuk route dengan folder kita wajib menambahkan file index.tsx.

Section 5 : Next Routing Dinamis

bagaimana dengan route yang dinamis ?

nextJS sudah menyiapkan ini dengan dinamic route, misalnya kita ingin membuat route localhost:3000/company/nama-company dan nama-company bisa berubah — ubah berdasarkan nama perusahaan yang terdaftar kita bisa menggunakan file pages/company/[company].tsx.

[company] akan menjadi query yang bisa kita gunakan di dalam code kita. untuk lebih memahami cara kerja routing pada next js kita akan buat percobaan sedernahana

1. buat folder baru dengan nama company dalam folder pages.
2. tambahkan file index.tsx dalam folder company seperti berikut

//file - pages/company/index.tsx
import Link from 'next/link'
export default function listCompany() {
  return (
    <>
      <h3>List Of Company</h3>
      <ul>
        <li>
          <Link href="/company/geulante">
            <a>PT. Geulante</a>
          </Link>
        </li>
        <li>
          <Link href="/company/cerape">
            <a>PT. Cerape</a>
          </Link>
        </li>
        <li>
          <Link href="/company/leumang">
            <a>PT. Leumang</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

buka localhost:3000/company di browser kalian, dan akan ada penambakan seperti berikut. jangan pedulikan dulu stylingnya ya, kita akan bahas styling yang bagus di section khusus nanti.

nah, kita bisa lihat url localhost:3000/company mengarah ke pages/company/index.tsx. sebenarnya ini sangat sederhana, nah, bagamaina ketika PT.Geulante di klik dan url akan mengarah ke localhost:3000/company/geulante dan browser akan mencetak geulante, begitu pula untuk PT Cerape dan PT. Leumang?

nah, ini akan di handle dengan route dinamis di nextJS.

3. Sekarang buat file baru di folder company dengan nama file [company].tsx

4. ketik code berikut

import { useRouter } from 'next/router'
export default function companyDetail() {
  const router = useRouter()
  const { company } = router.query
  return (
    <>
      <h3>detail of {company}</h3>
    </>
  )
}

di ketik woi jangan di paste gw capek ketik.

nah, di code di atas kita mengambil path terakhir dari url localhost:3000/company/geulante melalui method useRouter bawaan nextJS sebagai query.

sekarang balik lagi ke browser, dan klik di nama PT, kita akan di arahakan ke localhost:3000/company/compane-name dan di halaman tersebut akan tercetak nama company yang merupakan path dari url.

cukup sekian dulu, kita akan lanjutkan di chapter 2 mengenai Cara Styling NextJS dan mengintall tailwindcss ke nextJS.