Setelah berhasil membuat project Next.js, sekarang kita akan mempelajari struktur folder dan file yang ada di dalamnya.

Buat kalian yang baru pertama kali menggunakan Next.js, mungkin ketika membuka project akan melihat cukup banyak folder dan file dengan nama yang belum familiar.

Sebenarnya, kalian tidak perlu menghafalkan semuanya sekaligus. Namun, ada beberapa folder dan file penting yang perlu kalian pahami karena nantinya akan sering kita gunakan selama proses pengembangan blog.

Pada tutorial sebelumnya, kita menggunakan konfigurasi Recommended Defaults dari Next.js. Jadi, struktur project yang kita gunakan kali ini sudah menggunakan TypeScript, Tailwind CSS, dan App Router, tanpa folder src/.

1. Melihat Struktur Folder Project

Pertama, buka folder project tutorial_next_js menggunakan Cursor AI atau code editor yang sudah kalian pilih sebelumnya.

Di bagian Explorer, kalian akan melihat struktur folder dan file seperti berikut:

tutorial_next_js/
│
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
│
├── public/
│
├── .gitignore
├── AGENTS.md
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
└── tsconfig.json

Struktur di atas merupakan gambaran file utama yang akan kita temukan. Beberapa file tambahan seperti node_modules, .next, dan next-env.d.ts juga bisa muncul selama proses instalasi dan development.

Sekarang mari kita bahas satu per satu.

2. Folder app

Folder app merupakan salah satu bagian terpenting dalam project Next.js karena di sinilah kita akan membuat halaman website menggunakan App Router.

Beberapa file yang sudah tersedia di dalam folder ini antara lain:

a. page.tsx

File page.tsx merupakan file utama yang digunakan untuk menampilkan halaman website.

Secara default, file ini akan menjadi halaman homepage ketika kita mengakses alamat:

http://localhost:3000

Jadi, ketika nantinya kita ingin membuat tampilan halaman utama blog, kita akan banyak bekerja dengan file ini.

b. layout.tsx

File layout.tsx digunakan untuk membuat layout atau kerangka utama halaman website.

Misalnya, kita ingin memiliki Header dan Footer yang selalu muncul di setiap halaman. Kita bisa meletakkan komponen tersebut di dalam layout sehingga tidak perlu menuliskannya berulang kali pada setiap halaman.

Selain itu, file ini juga bisa digunakan untuk mengatur elemen HTML utama, metadata, dan konfigurasi tampilan global.

c. globals.css

File globals.css digunakan untuk menuliskan CSS global yang berlaku pada seluruh halaman website.

Karena kita menggunakan Tailwind CSS, file ini juga menjadi tempat konfigurasi dan import CSS Tailwind yang digunakan oleh project.

d. favicon.ico

File ini merupakan icon website yang biasanya ditampilkan pada tab browser.

Nantinya, kita bisa mengganti favicon bawaan Next.js dengan logo blog yang sedang kita buat.

3. Folder public

Folder public digunakan untuk menyimpan file statis yang ingin kita akses secara langsung melalui URL website.

Contohnya seperti:

• Logo website.
• Gambar artikel.
• Icon tambahan.
• File gambar lainnya.
• File robots.txt dan ads.txt.

Misalnya, kita memiliki file gambar bernama logo.png di dalam folder public.

Kita bisa mengaksesnya melalui alamat:

http://localhost:3000/logo.png

Jadi, jika nantinya kita membutuhkan gambar untuk kebutuhan tampilan blog, folder public bisa menjadi tempat penyimpanannya.

4. File Konfigurasi

Selain folder app dan public, ada beberapa file konfigurasi di root project yang juga perlu kalian kenali.

a. package.json

File package.json berisi informasi project, daftar dependency, dan script yang bisa kita jalankan menggunakan NPM.

Contohnya:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

Melalui file ini, kita bisa mengetahui perintah yang tersedia untuk menjalankan maupun membangun aplikasi Next.js.

b. next.config.ts

File ini digunakan untuk mengatur konfigurasi Next.js.

Misalnya, kita ingin mengatur konfigurasi gambar, redirect, cache, atau berbagai pengaturan lainnya. Nantinya kita bisa melakukannya melalui file ini.

c. tsconfig.json

File ini merupakan konfigurasi TypeScript yang digunakan untuk mengatur bagaimana TypeScript bekerja di dalam project.

Karena kita memilih Recommended Defaults, Next.js sudah menyiapkan konfigurasi TypeScript secara otomatis.

d. eslint.config.mjs

File ini digunakan untuk mengatur ESLint.

ESLint membantu kita menemukan potensi kesalahan dan menjaga konsistensi penulisan kode agar project lebih mudah dikelola.

e. postcss.config.mjs

File ini merupakan konfigurasi PostCSS yang digunakan dalam proses pemrosesan CSS, termasuk kebutuhan Tailwind CSS.

f. .gitignore

File ini digunakan untuk menentukan file atau folder yang tidak perlu dimasukkan ke dalam version control Git.

Contohnya, folder node_modules dan .next biasanya tidak perlu dimasukkan ke repository.

g. AGENTS.md

File ini berisi panduan atau instruksi untuk AI coding agent yang bekerja pada project kita.

Karena kita menggunakan konfigurasi Recommended Defaults terbaru, Next.js juga menyiapkan file ini agar AI coding agent memiliki konteks mengenai project dan aturan pengembangannya.

5. Folder node_modules dan .next

Selain struktur folder di atas, ada dua folder lain yang nantinya akan sering kalian temukan ketika mengembangkan aplikasi Next.js.

a. node_modules

Folder ini berisi seluruh package atau dependency yang sudah kita instal menggunakan NPM.

Misalnya, Next.js, React, dan berbagai library lainnya akan tersimpan di dalam folder ini.

Kalian tidak perlu mengedit isi folder node_modules secara manual karena pengelolaannya dilakukan melalui NPM.

b. .next

Folder ini merupakan direktori hasil generate Next.js yang digunakan untuk menyimpan berbagai file hasil proses development maupun build aplikasi.

Folder ini biasanya akan muncul setelah kita menjalankan development server atau melakukan proses build.

Sama seperti node_modules, kita tidak perlu mengubah isi folder .next secara manual.

Kesimpulan

Sampai di sini, setidaknya kalian sudah mengenal beberapa folder dan file penting yang ada di dalam project Next.js.

Dari semua struktur tersebut, ada tiga bagian yang menurut saya paling penting untuk kita pahami terlebih dahulu:

1. app/ untuk mengelola halaman dan layout website.
2. public/ untuk menyimpan file statis seperti gambar dan logo.
3. package.json untuk mengelola dependency dan perintah project.

Kita tidak perlu terburu-buru memahami semuanya karena nantinya kita akan menggunakan file-file tersebut secara langsung selama proses pembuatan blog.

Selanjutnya, kita akan mulai masuk ke materi Menjalankan Development Server untuk memahami bagaimana Next.js menjalankan aplikasi selama proses development.