Nextjs memang mengadopsi file system-based routing atau routing berdasarkan file sistem.. Bagi yang sudah terbiasa menggunakan Nextjs dibawah versi 13 pasti kalian familiar dengan folder pages. Pada nextjs sebelumnya folder pages menjadi folder yang menerapkan route pada tiap file didalamnya, sehingga ketika terdapat file bernama index.js maka kita dapat mengakses komponen tersebut dengan mengakses url root /, dan ketika terdapat file bernama about.js maka kita dapat mengakses komponen tersebut dengan mengakses url /about.

Pada versi yang lebih baru pada Nextjs di versi 13-nya, Nextjs masih tetap mendukung folder pages sebagai route, tetapi Nextjs menghadirkan fitur baru untuk route pada folder app. Lalu apa yang membedakan dengan folder pages? Perbedaan yang mendasar ialah jika pada versi sebelumnya komponen dirender secara klien atau dikenal dengan Client Side Rendering (CSR), berbeda dengan fitur app dimana secara bawaan atau default, komponen dirender di sisi server atau dikenal dengan istilah Server Side Rendering (SSR), selain itu terdapat konsep komponen layout, loading, dan error.

app Directory (beta): Easier, faster, less client JS.

Nextjs mengklaim bahwa fitur ini lebih mudah, lebih cepat dan lebih sedikit komponen klien. Okeh kita mulai membuat project terbaru dari Nextjs 13 dengan folder app.

Membangun project Nextjs 13 dengan menerapkan folder app

Sebelum masuk ke dalam pembuatan project Nextjs 13 dengan menerapkan folder app, kita akan mengulas sedikit mengenai routing di folder app pada Nextjs versi 13.

Routing halaman dengan folder app

Pada dasarnya seperti halnya folder pages, folder app juga mengambil route dari isi dalam folder tersebut, yang membedakan kalau folder app akan mengambil nama folder dan mencari file yang bernama page.js, jadi yang akan menjadi routingnya adalah nama foldernya bukan nama filenya. Sebagai contoh kita memiliki file yang berlokasi di /app/about/page.js ini akan menjadi routing untuk url /about.

Lalu terdapat beberapa file yang bersifat optional selain file page.js, antara lain sebagai berikut:

File loading.js

File bernama loading.js ini akan otomatis menggantikan file page.js didalam React suspense boundary. Komponen ini akan tampil terlebih dahulu saat pertama kali dibuka ketika kalian menavigasikan diantara routing yang setingkat.

File error.js

File bernama error.js ini akan menggantikan page.js didalam React error boundary apabila terjadi error yang terjadi dalam lingkup folder tersebut.

File layout.js

File bernama layout.js ini mendefinisikan tampilan yang akan diterapkan di berbagai page yang berada di dalam cakupannya (nested). Ketika rote berubah atau URL berubah dan akan merubah komponen di dalam layout, tetapi komponen layout tidak akan pernah dilepas (unmounted).

File template.js

File bernama template.js ini mirip dengan file layout.js, tetapi terdapaat perbedaan pada saat berpindah route. Template akan dirender ulang ketika berpindah route walaupun komponen template masih sama, berbeda dengan layout yang tidak akan dirender ulang. Ketika kalian menginginkan transisi saat berpindah halaman, maka gunakanlah template dibandingkan dengan layout.

Mari mulai mengaplikasikannya

Dari banyaknya perubahan yang dihadirkan oleh Nextjs 13, yang akan kita coba pada kali ini salah satunya ialah menggunakan folder app yang sebelumnya kita menggunakan folder pages. Langsung saja kita aplikasikan.

Membuat project Nextjs 13

Pertama-tama kita setup project baru terlebih dahulu menggunakan Create Next App:

npx create-next-app next-app-13
cd next-app-13

Disini kalian akan diminta untuk memilih bebearap opsi, pada kali ini kita tidak akan menggunakan Typescript dan Eslint, dan ketika pilihan apakah ingin menggukan folder eksperimental /app pilih Yes. Kemudian tunggu hingga proses setup selesai.

Ketika selesai membuat project baru kita dapat mulai mendevelopnya dengan menggunakan perintah:

npm run dev

# atau jika menggunakan yarn

yarn dev

Setelah itu buka http://localhost:3000/ dan setup project next 13 berhasil dan tampilannya akan seperti ini:

Membuat page dan layout

Jika pada proses sebelumnya kalian memilih untuk menggunakan folder app, maka folder ini sudah otomatis dibuat. Namun apabila tidak dibuat otomatis maka kalian perlu membuat folder ini sejajar dengan folder pages. Lalu buat file bernama page.js didalam folder app dan isikan kode berikut:

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Setelah membuat page kita akan membuat layout dengan mambuat file bernama layout.js sejajar dengan file page.js. Isikan dengan kode berikut:

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function Layout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        <div
          className={styles.header}
        >Ini Header</div>
        <div>
          {children}
        </div>
      </body>
    </html>
  )
}

CATATAN: Karena folder app ini masih masuk ke dalam fitur eksperimental, maka pastikan kalian mengaturnya dalam next.config.js

module.exports = {
  reactStrictMode: true,
  experimental:{appDir: true}
}

Setelah itu kita coba jalankan dan buka halaman yang sudah kita buat, maka hasilnya akan seperti berikut:

Jika terdapat konflik, coba pastikan tidak ada file index.js atau index.js di folder pages.

Styling layout

Pada tahap sebeluumnya kita baru membangun strukturnya saja, maka dari itu kita perlu memberikan styling yang sederhana pada layout agar tampilan dapat lebih menarik. Buat file bernama global.css di folder yang sama.

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: sans-serif;
}

header {
  background: skyblue;
  padding: 20px;
  font-size: 2em;
  font-weight: bold;
}

Setelah kita membuat file CSS-nya, jangan lupa untuk kita import file tersebut di komponen layout

import './global.css'

...

Berikut tampilan ketika styling berhasil ditambahkan

Membuat routing baru

Mari kita coba tambahkan pages kedua, agar kita dapat mencobanya langsung bagaimana routing di next versi 13 ini. Buat sebuah folder baru didalam folder app dengan nama about. Lalu buat file didalam folder yang telah kalian buat tadi dengan nama page.js dan isikan dengan kode berikut:

export default function Page() {
  return <h1>I am a experimental feature from Next 13</h1>;
}

Dengan begitu kita dapat mengakses halaman ini dengan routing http://localhost:3000/about , dan akan tampilannya akan seperti ini:

Jika kita perhatikan walaupun didalam folder about kita tidak membuat file layout.js tetapi layout tetap ada. Hal ini dikarenakan layout yang berada di dalam folder app akan menjadi Root Layout yang akan digunakan di seluruh file page.js walaupun dia berada di subfolder.

Mencoba memunculkan error

Kita akan mencoba melakukan handling error pada fitur ini. Kita buat folder bernama breaking didalam folder app. Lalu buat file page.js dan isi dengan kode berikut:

'use client';

import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    itWillBeError
  }, [])

  return (
    <div>
      <h1>BREAKING</h1>
      <div>
        <p>Its wil not be shown</p>
      </div>
    </div>
  );
}

Pada baris paling atas terdapat kode 'use client', hal ini untuk memberitahu Nextjs supaya menandakan komponen ini akan dirender disisi client atau dikenal dengan istilah Client Side Rendering (CSR).

Kemudian kita tambahakan kommponen error.js di dalam folder breaking dan isikan kode berikut:

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>
        Try again
      </button>
    </div>
  );
}

Komponen Error juga memerlukan untuk di render di sisi client maka itu dibaris pertama harus ditambahkan 'use client'. Jika kita perhatikan pada komponen Error kita dapat melihat 2 props yaitu error dan reset. Untuk prop error berisikan data error yang ditemukan sedangkan untuk prop reset ini merupakan fungsi yang dapat digunakan untuk melakukan reset Error Boundary.

Ketika kalian jalankan halaman http://localhost:3000/breaking dan akan muncul tampilan seperti ini.

Kalian tidak akan melihat komponen page.js, kenapa? Kalau kalian perhatikan pada file page.js disitu terdapat variable yang belum di definisikan yaitu itWillBeError. Hal ini memicu error dan akan memanggil komponen error.js. Jadi seperti itu gambaran bagaimana menangani error pada fitur app di Nextjs 13.

Mencoba menampilkan loading

Selanjutnya kita akan mencoba memunculkan loading. Buat file bernama loading.js pada folder breaking sebelumnya. Masukan kode berikut:

export default function Loading() {
  return <h1>Loading...</h1>
}

Untuk melihat loading tersebut kita perlu navigasikan dari halaman lain terlebih dahulu. Buka file page.js di folder about, dan kita akan tambahkan navigasi mengarah ke halaman breaking. Dan kodenya akan menjadi seperti berikut:

import Link from "next/link";

export default function Page() {
    return (
      <div>
        <h1>I am a experimental feature from Next 13</h1>
        <Link href="/breaking">navigate to breaking</Link>
      </div>
      );
  }

Mari kita coba buka halaman about kemudian navigasikan ke halaman breaking maka tampilannya akan seperti berikut:

Memperoleh atau pemanggilan data

Yang terakhir kita akan menerapkan pengambilan data dengan fitur baru yang ada di Nextjs 13 ini. Caranya sedikit berbeda dengan versi sebelumnya. Kali ini kita akan menggunakan data dari JSONPlaceholder

Cuss kita langsung coba saja. Kita akan coba lakukan pengambilan di halaman about, Tambahkan fungsi berikut di dalam file about/page.js:

...

async function getData() {
    const index = Math.floor(Math.random() * 10)
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${index}`);
    return res.json();
}

...

Dan untuk komponennya perlu diperbarui menjadi seperti berikut:

...


export default async function Page() {
    const data = await getData();

    return (
        <div>
            <h1>I am a experimental feature from Next 13</h1>
            <Link href="/breaking">navigate to breaking</Link>

            <div>
                <p>title: { data.title }</p>
            </div>
        </div>
    );
}

Jika kalian coba jalankan dan 'Taraaa' data berhasil didapatkan dan tampilannya seperti berikut.

---

Itu dia pengenalan dan juga penerapan fitur baru dari Nextjs versi 13 yaitu fitur folder app, fitur ini munkin masih versi beta atau masih dalam eksperimental, namun Nextjs menklai bahwa fitur ini dapat lebih mudah, lebih cepat dan lebih sedikit komponen yang ada di klien. Lalu jika di versi sebelumnya secara default komponen akan dirender disisi klien, tapi di Next 13 ini komponen dirender disisi server (SSR). Kemudian terdapat komponen-komponen yang dapat membantu kita menangani (menghandle) beberapa kondisi seperti error, loading, dan ketika ingin memanggil data.

Untuk penerapan yang sudah kita lakukan diats dapat dilihat di repositori berikut https://github.com/iqbl-nrkhls/tutorial-next-13-appdir

Sekian tutorial yang bisa saya sampaikan, semoga bermanfaat.

Terimakasih ^^