Design Pattern Fullstack NextJS with App Router

Struktur Folder

Pada bagian struktur folder ini, kita hanya akan fokus pada folder src. Berikut adalah struktur folder yang biasa gunakan untuk project Fullstack Next JS:

 

fullstack-next
|--...
|--/src
|  |--/app
|  |--/client
|  |--/lib
|  |--/server
|  |--/types
|  |--/utils
|  |--middleware.ts
|--...

 

middleware.ts

File middleware.ts berisikan function yang akan dijalankan sebelum request di teruskan ke komponen halaman ataupun ke api. Untuk lebih jelasnya silahkan silahkan kunjugi dokumentasi middleware.

 

TypeScript
// contoh file ./src/middleware.ts

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|assets).*)"],
};

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const user = {}; // change with your function to get user

  // Create your own rules to protect routes
  if (!pathname.includes("/sign-in") && !user) {
    return NextResponse.redirect(new URL("/sign-in", request.url));
  }


  // return empty, means request can be continue
  return;
}

 

app

Folder app merupakan folder standar dari NextJS App Router untuk mendefinisikan routing serta menangani metadata suatu halaman maupun API. NextJS mendokumentasikan dengan baik bagaimana cara menangani folder tersebut pada link berikut: Building Your Application: Routing | Next.js.

lib

Folder lib berisikan inisialisasi suatu library jika diperlukan. Library yang diinisialisasi di sini pun harus bisa dijalankan baik di server side maupun client side. Misalnya library dayjs perlu diinisialisasi ketika ingin dikonfigurasi default format locale-nya agar tidak perlu dikonfigurasi berulang-ulang.

TypeScript
// ./src/lib/dayjs.ts

import dayjs from "dayjs";
import "dayjs/locale/id";

dayjs.locale("id");

export default dayjs

 

types

Folder types berisikan type declaration agar kita bisa menggunakan tipe-tipe data tersebut di file-file typescript kita. Misalnya kita buat next-url.d.ts untuk mendeklarasikan type SearchParamsString secara umum yang dapat digunakan pada attribute props di page server component kita.

TypeScript
// ./src/types/next-url.d.ts

interface SearchParamsString {
	[key: string]: string | undefined
}

 

utils

Folder utils berisikan utilitas yang mungkin sering digunakan di sisi client maupun di sisi server. Contohnya adalah stringUtil seperti berikut:

TypeScript
// ./src/utils/stringUtil.ts

export function htmlToText(html: string) {
  html = html.replace(/<style([\s\S]*?)<\/style>/gi, "");
  html = html.replace(/<script([\s\S]*?)<\/script>/gi, "");
  html = html.replace(/<\/div>/gi, "\n");
  html = html.replace(/<\/li>/gi, "\n");
  html = html.replace(/<li>/gi, "  *  ");
  html = html.replace(/<\/ul>/gi, "\n");
  html = html.replace(/<\/p>/gi, "\n");
  html = html.replace(/<br\s*[\/]?>/gi, "\n");
  html = html.replace(/<[^>]+>/gi, "");

  return html;
}

 

client & server

Di Next.js, kita perlu paham mengenai client side dan server side. Menurut pemahaman gua, client side adalah runtime javascript yang dijalankan pada sisi client, yaitu browser. Sedangkan server side adalah runtime javascript yang di jalankan pada sisi server. Dan di sisi server ini ada 2 runtime yang berjalan, yaitu NodeJS dan Edge runtime. Hal ini menyebabkan ada beberapa kode javascript bisa dijalankan di sisi server namun di sisi client error, ataupun sebaliknya. Oleh sebab itu gua memisahkan kode-kode untuk client side dan server side dengan membuat folder client dan folder server yang akan kita bahas di halaman berikutnya.