Note:

Repo ini merupakan clone dari repo yang disediakan pada tutorial Next.js. Tempat belajar Next.js bisa kalian lihat di sini.

• export default diperlukan untuk routing otomatis berdasarkan filename.
• <Link> menavigasikan halaman dengan javascript. Jika js di-disable, halaman akan diload tanpa pre-rendering.
• Next.js merender komponen yg diperlukan saja untuk ditampilkan (codesplitting).
• Pada production, Resource halaman dari alamat yang tertulis di <Link> akan didownload di background terlebih dahulu. Sehingga, ketika diklik, resource sudah siap ditampilkan (prefetching).

Note:

Prefetching = Suatu proses dimana setelah tampilan halaman dimuat, browser akan mem-fetching halaman yang mungkin akan ditampilkan dan disimpan di cache. Dengan begitu, ketika halaman tersebut dibuka, pemuatan halaman jadi lebih cepat.

Terdapat 3 jenis prefetching, yaitu:

• Link Prefetching = mem-fetching RESOURCE dari link yang ada.
• DNS Prefetching = melakukan DNS lookup,
• Prerendering = mem-fetching KESELURUHAN ISI halaman dari link yang ada.

sumber: di sini

• Static file ditempatkan pada folder public. Untuk mengaksesnya, kita tidak perlu menggunakan alamat /public/images/profile.png, tapi /images/profile.png
• CSS module harus diakhiri dengan .module.css.
• CSS module memiliki class name yg di-generate otomatis. Sehingga, kita bisa menggunakan nama kelas yg sama pada komponen lain tanpa khawatir crash.
• setelah menambahkan _app.js pada pages/, diperlukan restart project.
• Next.js meng-compile CSS menggunakan PostCSS.

• Next.js menerapkan pre-rendering pada semua pages.
• setelah halaman yang sudah di-pre-render dimuat, barulah Next.js menjalankan kode javascript dan membuat halaman menjadi interaktif (hydration).

Note:

• CSR = browser mendownload html kosong, baru javascript. Javascript merender ulang halaman untuk ditampilkan.
• SSR = browser mendownload html yang sudah dirender oleh server, kemudian javascript-nya. Lalu, kode javascript dijalankan, barulah halaman jadi interaktif.

sumber: di sini

• konsep pre-render tidak ada pada create-react-app. Karena create-react-app bukanlah SSR. Sehingga, jika javascript di-disable, halaman web yang menggunakan create-react-app tidak akan bisa dimuat.
• Next.js memiliki 2 jenis pre-rendering:
  • Static Generation = page di-generate saat build-time, kemudian dapat dipakai berkali-kali pada setiap request.
  • SSR = page di-generate tiap request.
• Jika dijalankan mode dev (npm run dev), page akan selalu menggunakan SSR.
• Tiap halaman bisa menggunakan tipe pre-rendering yang berbeda.
• Gunakan static generation sebisa mungkin.

• getStaticProps() merupakan fungsi async untuk melakukan pengambilan data dan menyediakannya, sehingga page bisa di-build dengan metode static generation. Fungsi ini berjalan server-side. jadi, tidak akan berada pada bundle js.
• Static Generation dan getStaticProps() tidak cocok untuk halaman yang harus menampilkan data yang harus selalu up-to-date.
• Export getStaticProps() hanya boleh dilakukan di halaman (bukan component).
• getStaticProps() harus mereturn objek yang memiliki property props.
• getStaticProps() dapat menerima parameter jika diterapkan pada halaman dynamic. Parameternya adalah nama dari file tersebut. Misal: terdapat halaman dynamic dengan nama [id].js, maka parameter yang dimiliki oleh getStaticProps() adalah {id: ...}.

• Untuk mengaktifkan penggunaan Server-Side Rendering pada halaman, ganti getStaticProps() dengan getServerSideProps().

Note: bagian ini merupakan hal opsional. Tapi, bagus jika dipelajari.

• Menampilkan bagian halaman yang tidak membutuhkan data terlebih dahulu. ketika sudah dimuat, barulah memuat data yang diperlukan secara client-side menggunakan javascript (mirip cara kerja create-react-app).

• Dynamic route adalah route yang tidak tentu. Contoh: posts/:id. id dapat berupa angka tertentu dan berbeda setiap post-nya.
• Berikan tanda [ dan ] untuk menandai file sebagai dynamic route. Contoh: [id].js.
• Pada penggunaan getStaticPaths(), nilai yang direturnkan ketika mengakses external data harus berupa array of object dan objeknya harus memiliki property bernama params. Contoh:

return [
	{
		params: { id: "id1" },
	},
	{
		params: { id: "id2" },
	},
];

• Pada fungsi getStaticPaths(), harus sebuah objek dengan property bernama paths untuk menjadi nama alamatnya. Contoh:

return {
	paths: [
		{
			params: { id: "id1" },
		},
		{
			params: { id: "id2" },
		},
	],
	fallback: false,
};

Note: property fallback, jika bernilai false, ketika url yang tidak memiliki halaman diakses, akan mereturn 404 Page Not Found. Jika bernilai true, path yang direturnkan akan digenerate di build time dan halaman 404 tidak ditampilkan, tapi Next.js akan men-generate halaman versi "fallback".

• Perbedaan penulisan <Link> seperti menjadi <Link href="/alamat/[dynamicName]" as="/alamat/urlAslinya">
• Pada Development, getStaticPaths() dijalankan setiap requests.
• Pada Production,getStaticPaths() dijalankan setiap ketika build-time.
• Mengambil semua routes dapat dilakukan dengan cara [...]. Contoh: [...id] akan mengambil route dari id/nama, id/teman/tahun, dll.
• Dengan begitu, pada getStaticPaths(), harus mereturn id berupa array. misal: id: ["id1", "teman", "tahun"].
• Untuk mengkustom halaman 404, buat file 404.js di folder pages/.

• Next.js dapat membuat API-nya sendiri dengan membuat folder api di dalam folder pages/.
• Jangan fetching API Next.js dari getStaticProps() dan getStaticPaths().
• API Routes juga dapat dibuat menjadi dinamis seperti dynamic routes.

• Next.js merekomendasikan untuk mengembangkan project Next.js menggunakan konsep DPS. Yaitu:
  • Develop: Kembangkan aplikasi,
  • Preview: Push project ke github dan lihat hasil dari pengembangan/perubahan di Vercel,
  • Ship: Merge Pull Request ke master untuk masuk ke production.

Note: Untuk pengembangan Next.js dengan menggunakan bahasa TypeScript, setup dan beberapa hal mengenai typing dapat dilihat di sini.