Design Pattern Fullstack NextJS with App Router

client

fullstack-next
|--...
|--/src
|  |--...
|  |--/client
|  |  |--/components
|  |  |--/context
|  |  |--/hooks
|  |  |--/lib
|  |  |--/providers
|  |  |--/utils
|  |  |--config.client.ts
|  |--...
|--...

 

Di folder client, intinya gua bikin file-file yang hanya bisa dijalanin di client side. Setiap nam file typescript/javascript yang ditulis di sini harus diakhiri dengan .client.ts atau .client.tsx. Gimana cara gua bikinnya, mari kita bahas.

config.client.ts

File ini berisikan konfigurasi khusus yang bisa digunakan di sisi client. Misalnya tema, base url, dan beberapa attribute di file env khusus untuk client side. Bagi yang belum tau, untuk bisa akses attribute di file env dari sisi client, nama key attribute nya harus punya prefix NEXT_PUBLIC_, misalnya NEXT_PUBLIC_BASE_URL.

components

Untuk membuat satu komponen gua akan bikin satu folder dengan nama komponennya dan di dalamnya ada satu file bernama index. Tujuannya adalah ketika ada komponen yang terlalu panjang kodenya, bisa gua refactoring di folder komponen yang sama. Komponen hasil refactoring ini hanya boleh digunakan file index yang satu folder dengan komponen tersebut. Kalo komponen hasil refactoringnya bisa reusable untuk komponen yang lain, makan gua akan buat folder komponen yang terpisah dari komponen utamanya. Biar kebayang, kurang lebih kaya gini struktur folder components-nya.

|--/components
|  |--/Table
|  |  |--Row.client.tsx
|  |  |--Column.client.tsx
|  |  |--index.tsx
|  |--/Pagination
|  |  |--index.tsx

 

Coba perhatiin komponen Table. Misalnya gua refactoring komponen Table yang terdiri dari komponent Row, Column, dan Pagination. Komponen Row dan Column masih ada di dalam folder Table karena dua komponen tersebut hanya bisa digunakan di komponen Table. Sedangkan komponen Pagination dibuat terpisah karena bisa digunakan di komponen Table dan nantinya masih bisa digunakan di komponen lain misalnya di halaman blog, list produk, dan lainnya.

contexts, hooks, providers

Untuk penulisan file context, hook, dan provider bisa langsung tanpa buat folder kaya di components. Karena menurut gua di folder-folder ini akan minim refactoring. Untuk penulisan nama filenya kaya gini contohnya:

• context notification: NotificationContext.client.tsx
• provider notification: NotificationProvider.client.tsx
• hook notification: useNotification.client.tsx

 

Baru-baru ini gua masukin context langsung ke file provider karena context sendiri gk terlalu kompleks kodenya. Jadi gua gk pake lagi folder contexts.

lib & utils

Folder lib kurang lebih sama dengan sebelumnya, cuma di lib ini hanya bisa dijalanin di sisi client. Misalnya gua mau konfigurasi library axios khusus untuk client contohnya ketika intercept response. Atau ketika menggunakan firebase untuk pasang google analytics. Sedangkan untuk folder utils berisikan utilitas yang hanya bisa digunakan di client side contohnya ImageUploadAdapter yang digunakan untuk ckeditor5.

 

server

fullstack-next
|--...
|--/src
|  |--...
|  |--/server
|  |  |--/components
|  |  |--/modules
|  |  |--config.ts
|  |--...
|--...

Untuk folder components kurang lebih mirip kaya di client components, bedanya hanya bisa dijalanin di sisi server. Btw, kita bisa panggil client component di server component ya tapi sebaliknya nggak bisa. Di folder server gua bikin konsepnya modular mirip-mirip kaya di NestJS. Yuk kita bahas.

modules

Di konsep modular, kita menyatukan beberapa utilitas dalam satu business domain pada satu modul. Utilitas di sini bisa berupa service, validation, atau lainnya. Semua utilitas yang ada di modul-modul ini bisa digunakan di Server Component, Server Action, API Route handler, Middleware, dan dimanapun pada sisi server. Misalnya,gua mau bikin module prisma yang didalemnya ada prisma service. Terus juga gua mau bikin module post yang di dalamnya ada service dan validation untuk membuat suatu post. Atau mungkin gua perlu module util yang nantinya bakal sering dipake di sisi server. Maka kita akan bikin file-filenya seperti ini:

 

|--/server
|  |--/post
|  |  |--post.service.ts
|  |  |--post.validation.ts
|  |--/prisma
|  |  |--prisma.service.ts
|  |--/util
|  |  |--util.service.ts

 

selain tiga modul di atas, biasanya gua akan bikin module error dan logger untuk handle error dan loging aplikasi.

 

Kesimpulan

NextJS App Router menurut gua framework yang bagus untuk bikin Fullstack Web Application. 

• dokumentasinya cukup lengkap dan jelas, 
• aplikasinya cepet karena banyak yang dicaching, 
• penggunaanya juga cukup simple untuk ngebangun aplikasi sederhana.
• gampang dideploynya pake vercel, sekalian nyobain CI/CD ye kan.

Tapi kalo kita belom terlalu paham soal client side dan server side pasti bakal sering banget ngalamin error. Dengan kita perlajarin konsep client side dan server side serta nerapin design pattern yang baik, itu akan ngebantu kita bahkan mempercepat proses development aplikasi fullstack web NextJS. Design pattern yang gua usulin di sini gua buat berdasarkan pengalaman gua ketika ngedevelop fullstack web NextJS. Dari masalah-masalah yang gua alamin, gua rasa perlu untuk memisahkan file-file untuk client side dan untuk server side. Gua harap design pattern ini bisa jadi referensi kalian sebelum melakukan developement karena penentuan design pattern cukup penting agar kode-kode kita bisa ter-maintain dengan baik dalam jangka waktu panjang.