Next.js adalah framework React yang dibuat untuk mengatasi masalah client-side rendering yang dimiliki React .Next.js menawarkan berbagai fitur yang dapat mempercepat, mempermudah, dan memperluas pengembangan aplikasi.
Sampai artikel ini dibuat Nextjs telah sampai pada Nextjs versi 13 yang mengalami perubahan yang lumayan signifikan dari nextjs sebelumnya. Perubahan terbesar adalah ada pada struktur layouting dengan hadirnya folder app router yang sebelumnya menggunakan pages. Walau begitu kita tetap masih bisa menggunakan routing menggunakan direktori pages.
Apa saja perubahan di Next 13?
Adad beberapa perubahan pada next13 dibanding sebelumya,Berikut ini adalah sebagian perubahan di nextjs 13:
Turbopack(beta)
Turbopack adalah bundler optimized seperti webpack yang dibangun dengan bahasa Rust yg di klaim lebih cepat dalam build dan bundling file, dengan metode Turbopack dengan nextjs maka:
- 700x lebih cepat dari pada Webpack
- 10x lebih cepat dari pada Vite
- 4x lebih cepat dari pada cold start Webpack
Next/Link
Pada Nextjs 13 sudah menghilangan tag anchor <a> pada saat menggunakan Link. Sebenarnya ini adalah perubahan minor, tapi lumayan sangat berguna jika kita sebelumnya lupa menuliskan anchor <a> akan selalu membuat warning yang menganggu.
import Image from "next/link";
function Home() {
return <Link href="/product">product Page</Link>;
}Next/Image
Next/Image lebih ditingkatkan untuk merender image yang lebih cepat.hal ini bisa memperbaiki performa Core Web Vitals yang lumayan berguna dalam hal ini berguna meningkatkan SEO. Setiap kita membuat image maka disarankan kita harus membuat atribut alt nya
import Image from "next/link";
function Home() {
return <Image alt="my blog" src="mypicturepng" placeholder="blog" />;
}App/Directory
Perubahan yan paling besar pada Nextjs 13 adalah App router. Nextjs 13 telah membuat paradigma baru dalam hal routing dan layout. Bbeberapa fitur terbaru dalam nextjs 13:
- Routing Layouts
- Server components
- Async Components & Data Fetching
- Streaming
Pada artikel berikutnya kita akan bahas fiture-fiture diatas:
Menyiapkan Proyek
Pertama, kita perlu membuat direktori baru untuk proyek kita.
masuk ke folder tempat kita menempatkan projek nextjs dan masuk ke terminal. eksekusi command berikut:
npx create-next-app@latestSaat instal pertama kali kita akan disuruh meilih untuk memilih beberapa pilihan untuk inisiasi projek kita.
Didalam folder app buatkan edit file layout.tsx:
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Membuat Halaman Baru
Untuk membuat halaman baru, buat folder dengan nama users.
Nama folder ini adalah sebuah routes yang didalamnya terdapat file layout.tsx dan juga file wajib page.tsx.
layout adalah sebuah file template yang bisa membuat sebuah tampilan route,sedangkan file page adalah sebuah file index yang akan ditampilkan saat kita akses sebuah route.
buat file baru didalam folder users yang telah kita buat dengan nama page.tsx.
export default function Page() {
return <h1>Hello, Ini adalah halaman user</h1>
}jalankan program dengan yarn dev. dan akses route dengan localhost:3000/users.
Maka halaman route user akan tampil
Baca Juga Artikel seri Nextjs 13 dibawah ini:
