Shortcut Belajar NextJS Typescript dengan basic HTML, CSS dan JS

Kamu tipikal programmer yang belajar fundamental terlebih dahulu?

Atau kamu lebih suka belajar sambil langsung mencoba?

Di artikel ini saya ingin memberikan pengetahuan NextJS khusus untuk kamu yang lebih suka belajar sambil langsung mencoba!

Singkatnya, Apa Itu NextJS?

NextJS adalah framework untuk ReactJS dimana NextJS lebih kaya akan fitur dibandingkan dengan ReactJS. NextJS secara bawaan mendukung server-side rendering (SSR), yang memungkinkan pembuatan halaman di server sebelum dikirim ke browser. Hal ini dapat meningkatkan kecepatan pembukaan halaman dan memberikan pengalaman pengguna yang lebih baik, terutama untuk aplikasi web yang memerlukan SEO yang baik.

Tapi, saya belum tau ReactJS nih…

Simpelnya, ReactJS adalah struktur penulisan HTML, CSS, dan Javascript yang dibuat sedemikian rupa hingga berbentuk komponen seperti ini:

// Kode di bawah menggunakan bahasa pemrograman typescript

// (tidak berbeda jauh dari javascript)

const MyComponent = ({ name }: { name: string }) => { // Blok React Component

 const cleanedName = name.trim(); // <-- Javascript

 return (

   <div // <-- HTML

     style={{ backgroundColor: "black", color: "white" }} // <-- CSS

     id="div1"

   >

     Hello World, My Name is {name}!

   </div>

 )

}

export default MyComponent;

Kode diatas berarti kita telah membuat komponen ReactJS bernama MyComponent. Jika kita perhatikan secara detail, kode tersebut sudah mengandung HTML, CSS, dan Javascript dieksekusi dalam satu blok kode. Selanjutnya, kembalian HTML, CSS dan Javascript dari MyComponent bisa dipanggil di file lain dengan mengimpornya sebagai komponen library. Contohnya seperti blok kode berikut,

import MyComponent from "@/component/path-to-file";

const MyPage = () => {

 return (

   <>

     <Navbar />

     <Layout>

       <MyComponent // <-- Komponen Buatan

         name="Asa" // <-- Properti dari komponen (bisa disesuaikan)

       />

     </Layout>

   </>

 )

}

export default MyPage;

Memulai Belajar NextJS

Untuk membuat project NextJS, kalian perlu beberapa persiapan text editor seperti VSCode, engine seperti NodeJS, dan package manager seperti NPM ataupun Yarn.

Sebelum memulai, perlu diketahui bahwa NextJS memiliki pengembangan fitur yang sangat cepat. Pada NextJS versi terbaru (14.0.3), kamu dapat memilih untuk menggunakan folder `app/` sebagai root directory, yang mana memiliki cara pemrograman yang berbeda dengan NextJS versi 13 ke bawah. Namun menurut penulis, untuk pemula sebaiknya tidak langsung menggunakan fitur tersebut karena banyak template project NextJS dengan library lain yang belum kompatibel dengan konfigurasi tersebut. Untuk informasi terbaru, kamu bisa gabung komunitas NextJS (discord) dengan klik disini.

Oke, mari kita mulai dengan membuka VSCode pada folder yang akan diisikan project NextJS baru. Selanjutnya buka terminal pada VSCode dan jalankan salah satu command berikut:

// NPM

npx create-next-app@latest

// YARN

yarn create next-app

// PNPM

pnpm create next-app

// BUNX

bunx create-next-app

Setelah itu, kamu akan mendapat pilihan konfigurasi pada project kamu. Sebagai latihan, pilihlah konfigurasi seperti dibawah:

What is your project named?  project-nextjs

Would you like to use TypeScript?  No / Yes

Would you like to use ESLint?  No / Yes

Would you like to use Tailwind CSS?  No / Yes

Would you like to use `src/` directory?  No / Yes <-- Jika pertanyaan ini menggunakan `app/`, maka jawab No

Would you like to use App Router? (recommended)  No / Yes

Would you like to customize the default import alias (@/*)?  No / Yes

Setelah mendownload beberapa asset, kamu bisa mulai mempelajari struktur project NextJS.

Menjalankan Project NextJS di Lokal

Kamu sudah mendapat template project, sekarang saatnya kamu melihat apa yang telah kamu buat dengan menjalankannya di server lokal. Jalankan `npm run dev` atau `yarn dev` atau command lainnya sesuai dengan javascript runtime manager kamu di terminal. By default, NextJS akan memilih port 3000 sebagai live server dari project yang sedang kamu jalankan.

Selanjutnya, buka http://localhost:3000 .

Tada! Di langkah ini, kamu berhasil untuk mengawali project NextJS kamu! Sekarang, saatnya mempelajari beberapa keunggulan NextJS.

Membuat Routing dengan Mudah

NextJS menyediakan sistem routing yang mudah digunakan tanpa perlu konfigurasi tambahan. Sistem ini membantu pengembang mengelola navigasi dalam aplikasi dengan lebih efisien. Untuk mencoba membuat routing baru, ketahui konsep dibawah ini:

• Rute http://localhost:3000 atau http://localhost:3000/ adalah rute yang sama yang kita sebut sebagai halaman index atau “/”.

• Halaman “/” merupakan representasi dari komponen yang diekspor di `src/pages/index.tsx`.

• Jika ingin membuat halaman “/dashboard” maka kamu perlu membuat file `src/pages/dashboard.tsx` atau `src/pages/dashboard/index.tsx` yang mengekspor sebuah komponen react.

Dengan melihat konsep di atas, dapat dipahami bahwa untuk membuat routing baru dalam proyek NextJS kamu hanya perlu membuat file baru pada folder `src/pages/`.

Pada kasus tertentu, jika kamu ingin membuat halaman dinamis seperti “/profil/personA” dan “/profil/personB” dalam satu halaman maka kamu cukup membuat file dengan nama file `src/pages/profil/[name].tsx`. Cara membaca URL parameter ada 2, yaitu:

• Membacanya di sisi client dengan useRouter().

import { useRouter } from "next/router";

const MyPage = () => {

 const router = useRouter(); // <-- Gunakan useRouter dari NextJS

 const { name } = router.query; // <-- Ambil url parameter "name"

 return (

   <div

     style={{ backgroundColor: "black", color: "white" }}

     id="div1"

   >

     Hello World, My Name is {name}!

   </div>

 )

}

export default MyPage;

• Membacanya di server sehingga langsung menyisipkan parameter tersebut sebagai properti dari komponen ReactJS menggunakan SSR (fitur rendering dari NextJS).

import { GetServerSideProps } from "next";

// Beri sinyal kepada NextJS bahwa halaman ini menggunakan SSR

export const getServerSideProps: GetServerSideProps = async (context) => {

 const { name } = context.query;

 return {

   props: {

     name: name || "(nama kosong)", // <-- Menyisipkan properti untuk client

   },

 };

};

const MyPage = ({ name }: { name: string }) => {

 return (

   <div

     style={{ backgroundColor: "black", color: "white" }}

     id="div1"

   >

     Hello World, My Name is {name}!

   </div>

 )

}

export default MyPage;

Jika kamu memiliki URL parameter dalam bentuk lain search misalnya search pada “/profil/personA?search=favourite”, kamu bisa menggunakan cara yang sama seperti parameter “name” sebelumnya!

Fitur Lain di NextJS

Masih banyak fitur lain di NextJS yang bisa kamu explore seperti,

• Code Splitting dan Automatic Code Splitting

• Server Side Rendering (SSR)

• Static Site Generation (SSG)

• Full Stack dengan NextJS termasuk API Backend

• Plugin Overpower yang bisa dimasukkan di NextJS

• Dan masih banyak lagi

Penasaran dengan fitur NextJS lainnya? Tunggu artikel selanjutnya ya.

Bingung ingin mencari pekerjaan, tapi belum punya portofolio? Daftar dan ikuti  Bootcamp Frontend Web Developer! Disana kamu akan belajar fundamental dan mendapatkan final project secara real case. Di akhir Bootcamp, kamu juga akan mendapatkan layanan penyaluran kerja. So, jangan sampai menyesal ya!