Ini adalah proyek Next.js di-bootstrap dengan create-next-app
.
Fitur yang terdapat pada templat proyek ini adalah:
- SEO dasar.
- Proyek Arsitektur.
- Authentikasi.
- State Management.
- Kustomisasi
React Hooks
. - Beberapa fungsi kustom yang sering Saya pakai.
- Implementasi
Types
danInterface
.
Anda dapat mengkustomisasi SEO Dasar
pada templat ini dengan memodifikasi dokumen /src/data/siteMetadata.ts
. Anda juga bisa melihat bagaimana Saya membuat SEO Dasar
pada templat ini melalui dokumen /src/components/SEO.tsx
.
Terdapat beberapa poin penting terkait bagaimana menjalankan proyek arsitektur yang benar. Untuk studi kasus kali ini, Saya telah membuatkan sebuah templat proyek kosong yang sudah Saya kustomisasi yang sekiranya sudah mengimplementasi bagaimana cara mengatur proyek arsitektur yang baik agar terlihat rapi.
/
├── public/
├── src/
│ └── app/
│ │ └── about/
│ │ └── api/
│ │ │ └── auth/
│ │ │ └── [...nextauth].ts
│ │ └── auth/
│ │ └── contact/
│ │ └── favicon.ico
│ │ └── globals.css
│ │ └── layout.tsx
│ │ └── page.tsx
│ └── components/
│ │ └── Common/
│ │ └── Containers/
│ │ │ └── About/
│ │ │ └── Auth/
│ │ │ └── Contact/
│ │ │ └── Home/
│ │ └── Mixins/
│ │ │ └── Navbar/
│ │ │ └── Footer.tsx
│ │ └── README.md
│ └── data/
│ └── hooks/
│ └── layouts/
│ └── lib/
│ └── store/
│ └── utils/
│ └── interfaces/
│ │ └── auth.ts
│ │ └── todolist.ts
│ └── types/
│ └── auth.ts
│ └── todolist.ts
└── .env.example
└── .eslintrc.json
└── .gitignore
└── next-env.d.ts
└── next.config.mjs
└── package-lock.json
└── package.json
└── postcss.config.js
└── README.md
└── tailwind.config.ts
└── tsconfig.json
Folder Common
terletak pada /src/components/
. Lalu didalamnya berisikan apa saja? Folder Common
Berisikan komponen-komponen kecil, seperti: tombol, dropdown, dll.
Folder Mixins
terletak pada /src/components/
. Lalu didalamnya berisikan apa saja? Folder Mixins
Berisikan komponen-komponen yang merupakan gabungan dari komponen-komponen kecil dari folder Common
. Seperti: navbar (yang berisi beberapa hal umum seperti tombol, dropdown, dll).
Folder Containers
terletak pada /src/components/
. Lalu didalamnya berisikan apa saja? Folder Containers
Berisikan kombinasi folder Common
dan halaman itu sendiri yang membentuk 1 halaman. 1 halaman 1 folder Containers
agar tetap rapi.
Jika pada 1 container memiliki beberapa section, maka Anda harus memisahkan dan menaruhnya di dalam folder components
namun masih tetap dalam 1 folder Containers
. Seperti: /src/components/Containers/Home/components
.
Pada templat proyek ini sudah menggunakan authentikasi menggunakan NextAuth. Sudah terdapat sebuah contoh authentikasi menggunakan GitHub
, jika user sudah melakukan authentikasi maka user tidak bisa mengakses halaman login
dan register
kembali. Anda juga dapat memproteksi halaman root
atau /
Anda dengan menghapus komentar pada file /src/app/page.ts
.
Pada templat proyek ini sudah menggunakan implementasi State Management
menggunakan Zustand. Agar penggunaan tetap optimal, pada saat Anda ingin membuat state
baru, perlu di ingat bahwa Anda harus meng-definisikan Interface
dan Type
terlebih dahulu pada folder /src/utils
. Kemudian Anda dapat meng-definisikan apa saja yang Anda butuhkan untuk state
tersebut pada folder /src/store
.
Anda dapat menggunakan, serta menambahkan kustom React Hooks
Anda sendiri pada folder /src/hooks
yang telah disediakan. terdapat sebuah contoh kustomisasi React Hooks
untuk Data Fetching
menggunakan SWR dan Axios.
Pertama, buka terminal lalu eksekusi perintah berikut:
npx degit nuflakbrr/next-template#master <nama_proyek>
atau, jika Anda ingin menggunakan versi Typescript & Payload CMS
, eksekusi perintah berikut:
npx degit nuflakbrr/next-template#typescript-payloadcms-version <nama_proyek>
atau jika Anda ingin menggunakan versi Javascipt
, eksekusi perintah berikut:
npx degit nuflakbrr/next-template#javascript-version <nama_proyek>
Kedua, install depedencies
didalam proyek yang sudah Anda klona:
npm install
# or
yarn install
Ketiga, jalankan server pengembangan:
npm run dev
# or
yarn dev
Keempat, buka http://localhost:3000 pada browser Anda dan lihat hasilnya.
Anda dapat mulai mengedit halaman dengan memodifikasi /src/components/Containers/Home/Home.tsx
. Halaman diperbarui secara otomatis saat Anda mengedit file.
Rute API dapat diakses di http://localhost:3000/api/hello. Titik akhir ini dapat diedit di /src/app/api/hello.ts
.
Folder /src/app/api
dipetakan ke /api/*
. File dalam direktori ini diperlakukan sebagai Rute API bukannya Bereaksi halaman.
Untuk mempelajari lebih lanjut tentang Next.js, lihat referensi berikut:
- Dokumentasi Next.js - pelajari tentang fitur dan API Next.js.
- Pelajari Next.js - tutorial Next.js yang interaktif.
Anda dapat memeriksa GitHub Repositori Next.js - umpan balik dan kontribusi Anda dipersilakan!
Jalur paling mudah untuk publikasi aplikasi Next.js Anda menggunakan Vercel dari pencipta Next.js.
Lihat dokumentasi publikasi Next.js kami untuk lebih lengkap.
Nama kontributor dan info kontak,
Naufal Akbar Nugroho
@nuflakbrr
@kbrnugroho