Welcome to Next.js 13! / Parsinta

Next.js 13 sudah keluar, dan pastinya ada beberapa major rilis disini yang mungkin akan mengejutkan kita, atau bahkan biasa saja. Tapi kita akan mulai dulu dari apa yang baru dalam Next.js 13 ini.

Turbopack (Alpha)

Turbopack adalah successor dari webpack sendiri yang dibangun dengan bahasa Rust, yang itu sudah pasti tidak di ragukan lagi kecepatannya. Berikut adalah perbandingan Next.js dengan Next.js.

700x lebih cepat dari pada Webpack
10x lebih cepat dari pada Vite
4x lebih cepat dari pada cold start Webpack

Turbopack saat ini hanya mendukung untuk next dev, belum untuk next build. Turbopack juga belum mendukung postcss dan tailwindcss.

Jangan khawatir, karena turbopack masih alpha. Jadi ini masih akan terus dikembangkan sampai stabil.

Nah untuk menggunakannya, kita bisa menambahkan --turbo pada next dev nya yang ada di scripts pada file package.json seperti:

package.json

1{
2    "name": "irsyadnotes.com",
3    "version": "0.1.0",
4    "private": true,
5    "scripts": {
6        "dev": "next dev --turbo",
7        "build": "next build",
8        "start": "next start",
9        "lint": "next lint",
10        "format": "prettier --write ."
11    },
12    ...
13}
14
jsonCopy

Setelah itu, kita bisa jalankan ulang seperti biasa seperti:

1npm run dev
2
bashCopy

Atau jika mau directly dari terminal bisa juga, jalankan perintah berikut:

1npx next dev --turbo
2
bashCopy

Oia, karena turbopack ini belum mendukung yang namanya Postcss dan juga Tailwindcss, maka jika project kita ada tailwindcss nya, dia akan mengeluarkan peringatan semacam warning yang kurang lebih akan seperti ini:

1Warning: You are using configuration that may require additional
2setup with Turbopack. If you already made these changes please
3ignore this warning.
4
5- PostCSS detected (postcss.config.js)
6  PostCSS is not yet supported by Next.js v13 with Turbopack.
7  To use with Turbopack, see: https://nextjs.link/turbopack-postcss
8
9- Tailwind detected (tailwind.config.js)
10  Tailwind is not yet supported by Next.js v13 with Turbopack.
11  To use with Turbopack, see: https://nextjs.link/turbopack-tailwind
12
bashCopy

Jadi pastikan Anda akan menggunakan next js dengan turbopack ini jika memang Anda tidak memakai Postcss ataupun Tailwindcss. Wajar kok, karena ini masih alpha rilis, nanti lama-kelaman pasti didukung juga kok. Kita tinggal nunggu tanggal main nya aja, kapan mereka ready, ya kita tunggu aja.

Next Image

Salah satu kebanggaan kita menggunakan menggunakan next/image ini adalah sangat meningkatkan yang namanya Core Web Vitals, yang mana itu adalah salah satu yang harus kita miliki saat kita bicara tentang SEO friendly.

Dan itu adalah pengakuan dari komunitas yang sudah memakai next/image di environment production, sehingga memang sudah terbukti ke optimalannya. Dan di versi Next 13 ini, next/image juga mendapat update yang sangat luar biasa.

Jika dulu kita tidak mudah mengkonfigurasi nya, sekarang harusnya akan lebih mudah. Dan juga, kita diwajibkan untuk memberikan alt ketika menggunakan next/image ini.

1import Image from "next/image";
2
3function Home() {
4    return <Image alt="irsyadadl" src="picture.png" placeholder="blur" />;
5}
6
jsxCopy

Next Font

Dalam versi 13 ini, Next.js sendiri memperkenalkan sistem font baru yang lebih optimal untuk kita. Berikut adalah fitur baru yang diberikannya:

Optimasi font secara otomatis baik dari cdn maupun custom
Menghapus external network requests untuk meningkatkan privasi dan kinerja
Otomatis menggunakan size-adjust
Hosting mandiri otomatis bawaan untuk file font apa pun

Berikut adalah penulisan untuk menggunakan font, dan dalam contoh ini. Kita menggunakan font dari google yaitu adalah Inter.

1import { Inter } from '@next/font/google';
2
3const inter = Inter();
4
5<html className={inter.className}>
6
jsxCopy

Next Link

Dulunya ketika kita menggunakan next/link ini, kita diwajibkan untuk menambahkan <a> didalamnya. Namun sejak versi 13 ini, itu tidak lagi jadi masalah. Saya sendiri juga sangat bersukur akan hal ini, karena rasanya gak enak aja membuat link yang terlihat seperti 2 kali.

Sebelumnya, kita akan melakukan hal ini:

1import Link from 'next/link';
2
3<Link href="/articles">
4    <a className='text-violet-600'>
5        Articles
6    </a>
7</Link>
8
jsxCopy

Namun sekarang, kita tidak perlu lagi khawatir tentang anchor itu.

1import Link from 'next/link';
2
3<Link className='text-violet-600' href="/articles">
4    Articles
5</Link>
6
jsxCopy

app/ Directory (Beta)

Next.js meningkatkan routing dan layout sistem nya di versi Next.js 13 ini dnegan memperkenalkan kita folder baru yaitu app/.

Fitur Dasar

Beberapa fitur yang bisa kita dapat dari app/ ini adalah:

Layouts
Server components
Streaming
Suspense for Data Fetching

Jangan khawatir, kita akan bahas satu persatu dari fitur ini.

Install Next.js 13

Untuk memulainya, mari kita lakukan instalasi Next.js versi 13 dengan memberi flag --experimental-app. Buka terminal dan jalankan perintah berikut:

1npx [email protected] --experimental-app next-13
2
bashCopy

Nanti akan di tanya, kita ingin pakai typescript / eslint atau tidak, jadi kurang lebih tampilannya akan seperti ini:

1Need to install the following packages:
2  [email protected]
3Ok to proceed? (y)
4✔ What is your project named? … next-13
5✔ Would you like to use TypeScript with this project? … No / Yes
6
bashCopy

Gunakan tombol kanan kiri untuk pilih no / yes pada keyboard. Jika kita pilih typescript, maka dia akan melakukan instalasi dependencies seperti berikut:

1Installing dependencies:
2- react
3- react-dom
4- next
5- typescript
6- @types/react
7- @types/node
8- @types/react-dom
9- eslint
10- eslint-config-next
11
bashCopy

Setelah itu selesai, maka silakan buka project ini di text editor yang Anda pakai, dan harusnya akan sudah ada folder baru yang itu sejajar dengan pages.

1.
2├── app
3├── pages
4│   └── api
5└── public
6
bashCopy

Didalam folder app akan ada beberapa file seperti css dan file typescript react seperti:

1app
2├── globals.css
3├── layout.tsx
4├── page.module.css
5└── page.tsx
6
bashCopy

Layouts

Anda bisa perhatikan pada file layout.tsx yang itu isinya adalah layout dari halaman kita, ada head, meta, title dan sebagainya. Kurang lebih tampilannya akan seperti ini:

./app/layout.tsx

1import './globals.css';
2
3export default function RootLayout({ children }: { children: React.ReactNode }) {
4    return (
5        <html lang='en'>
6            <head>
7                <title>Create Next App</title>
8                <meta name='description' content='Generated by create next app' />
9                <link rel='icon' href='/favicon.ico' />
10            </head>
11            <body>{children}</body>
12        </html>
13    );
14}
15
tsxCopy

Karena ini adalah root layout kita, jadi kita legal untuk memasukkan semacam navigasi yang kita inginkan. Dalam folder app ini, saya akan buat file navbar.tsx untuk komponen navigasi kita, yang isinya kurang lebih seperti:

./app/navbar.tsx

1import React from 'react';
2import Link from 'next/link';
3
4export default function Navbar() {
5    return (
6        <nav>
7            <ul>
8                <li>
9                    <Link href='/'>Home</Link>
10                </li>
11                <li>
12                    <Link href='/posts'>Posts</Link>
13                </li>
14            </ul>
15        </nav>
16    );
17}
18
tsxCopy

Kemudian, mari kita masukan komponen navbar ini kedalam root layout kita.

./app/layout.tsx

1import './globals.css';
2import Navbar from "./navbar";
3
4export default function RootLayout({ children }: { children: React.ReactNode }) {
5    return (
6        <html lang='en'>
7            <head>
8                <title>Create Next App</title>
9                <meta name='description' content='Generated by create next app' />
10                <link rel='icon' href='/favicon.ico' />
11            </head>
12            <body>
13                <Navbar/>
14                {children}
15            </body>
16        </html>
17    );
18}
19
tsxCopy

Setelah itu, buka file page.tsx untuk kemudian memodifikasinya menjadi seperti ini:

./app/page.tsx

1export default function Home() {
2    return (
3        <div>
4            <h1>Welcome to Next.js 13!</h1>
5            <p>
6                The home page.
7            </p>
8        </div>
9    )
10}
11
tsxCopy

Setelah itu, mari kita buka terminal untuk menjalankan dev server nya seperti:

1npm run dev
2
bashCopy

Buka browser Anda dan kunjungi alamat yang diberikan nya. Biasanya itu adalah http://localhost:3000/.

Struktur Posts

Waktu pembuatan navigasi itu, saya sengaja membuat halaman artikel, yang jika di kunjungi itu akan pergi ke 404. Baik, sekarang mari kita buat 1 folder dengan nama posts, dan didalamnya kita buat file dan folder yang kurang lebih struktur nya seperti:

1app/posts
2├── [id]
3│   └── page.tsx
4└── page.tsx
5
bashCopy

Data Fetching

Buka file page.tsx dan kita akan melakukan fetching data seperti layakanya kita melakukannya di folder pages.

./app/posts/page.tsx

1import { use } from 'react';
2import Link from 'next/link';
3
4const getPosts = async () => {
5    let posts = await fetch('https://dummyjson.com/posts?limit=7');
6    return posts.json();
7};
8
9type Post = { id: any; title: string; };
10
11export default function PostLayout() {
12    let { posts } = use(getPosts());
13    return (
14        <div>
15            <h1 className='text-2xl'>Post page</h1>
16            {posts.map((post: Post) => (
17                <Link href={`/posts/${post.id}`} key={post.id}>
18                    <div>{post.title}</div>
19                </Link>
20            ))}
21        </div>
22    );
23}
24
tsxCopy

Anda bisa perhatikan pada bagian use, itu adalah hook yang kita dapat dari React sendiri. Yang mana itu juga dikembangkan dari React suspense. Kurang lebih, use ini sama seperti sewaktu kita menggunakan getStaticProps dan getServerSideProps.

Regular Function

Pertama, kita fetch datanya seperti layaknya menggunakan regular function pada javascript:

1const getPosts = async () => {
2    let posts = await fetch('https://dummyjson.com/posts?limit=7');
3    return posts.json();
4};
5
tsxCopy

use Hook

Setelah itu, panggil dia tepat di dalam komponen kita melalui use hook seperti:

1import { use } from 'react';
2import Link from 'next/link';
3
4const getPosts = async () => {...};
5
6export default function PostLayout() {
7    let { posts } = use(getPosts());
8    return (...);
9}
10
tsxCopy

Params

Sekarang, mari kita buka halaman [id]/page.tsx untuk mengambil id yang kita dapat dari posts ini:

./app/posts/[id]/page.tsx

1export default function Page({ params }) {
2    let id = params.id;
3    return <div>Post of id: {id}</div>;
4}
5
tsxCopy

Saya sengaja tidak melakukan data fetching di komponen, yang seharusnya Anda ia. Saya hanya ingin memastikan bahwa Anda sekarang mengerti konsep nya.

Loading

Dulunya sewaktu kita menggunakan react suspense, yang biasa kita lakukan adalah kurang lebih seperti ini:

1<Suspense fallback={<LoadingSkeleton/>}>
2    {/* ... */}
3</Suspense>
4
tsxCopy

Sekarang, untuk melakukan hal itu, Anda hanya perlu membuat 1 file di dalam folder app dengan nama loading.tsx. Setelah itu semua akan di konfigurasi otomatis, tidak perlu cek apakah data ada dan sebagainya.

./app/loading.tsx

1export default function Loading() {
2    return (
3        <div>
4            Loading...
5        </div>
6    );
7}
8
tsxCopy

Mantap tidak ? Oia jangan lupa untuk membaca-baca lagi lebih jauh tentang update ini.

Next.js API seperti getServerSideProps, getStaticProps dan getInitialProps tidak akan di dukung di direktori app ini.

Fitur Secara Detail

Berikut ini adalah detail-detail fitur yang di dukung dalam folder app ini:

Data Fetching
- Static-Site Generation
- Server-Side Rendering
- Incremental Static Regeneration
- use()
- fetch()
- cache()
Components
- Image
- Fonts
- Scripts
Server Components
Streaming
Layouts
Special Files
- Page
- Layout
- Loading
- Error
- Template
- Not found

Dokumentasi Baru

Harus diakui bahwa dokumentasi baru yang dibuat oleh tim Next.js ini benar-benar 🔥. Yang dulunya tidak mendukung mode gelap dan sekarang sudah mendukung. Tidak sekedar itu, dokumentasi baru ini juga mengizinkan kita berkomentar, quote, bahkan memberi reaction. Namun karena belum siap, ini masih di klaim sebagai beta docs untuk Next.js.

Kesimpulan

Hal yang baru akan terus muncul di dalam dunia teknologi ini, tinggal kita saja yang bisa atau tidak mengikutinya. Kita adalah web developer, bukan tuhan. Jadi kita legal untuk tidak harus mengetahui segala-galanya. Saya Irsyad, I'll see you next time.

Welcome to Next.js 13!

Share