Mengenal dan 2 Cara Install Next.js

Install Next.js itu mudah, kita bisa melakukannya dengan dua cara, yaitu secara manual dan otomatis. Kamu dapat menginstall Next.js pada sistem operasi Windows, Linux, dan MacOS asalkan sistem kamu sudah terpasang Node.js. Jika belum menginstallnya, silakan install dengan membaca panduan pada artikel.

3 Cara Install dan Menjalankan Node.js + NPM di Ubuntu

Mengenal Next.js

Berdasarkan pengertian Next.js dari situs officialnya, Next.js merupakan salah satu framework React yang sangat populer dan ringan untuk membuat website statis atau SSR (Server-side Rendering).

Next.js tidak hanya untuk membangun front-end karena merupakan server-side, ia juga dapat digunakan sebagai back-end layaknya PHP, seperti membuat API endpoint, menambahkan modul CSS di dalam Next.js, dan lainnya. Salah satu perusahaan besar yang menggunakan framework ini adalah Traveloka.

Next.js membantu developer yang sudah menguasai React dan ingin membuat Server-side Rendering tanpa perlu ribet memikirkan setup routing, SEO-friendly, dan lainnya. Namun bukan berarti membuat aplikasi React tanpa Next.js tidak bisa SEO-friendly. Bisa, namun agak ribet untuk dilakukan.

Fitur Next.js

Berdasarkan situs official Next.js, berikut ini adalah beberapa fitur yang membuat framework ini begitu populer karena fitur yang dirtawarkannya, antara lain sebagai berikut.

Page-based routing system (dengan mendukung routing dinamis).
Pre-rendering, static generation (SSG) dan server-side rendering (SSR) didukung per halaman.
Automatic code splitting untuk memuat halaman lebih cepat.
Client-side routing dengan pemuatan awal yang dioptimalkan.
Built-in CSS dan Sass support, dan mendukung library CSS-in-JS.
Development environment dengan mendukung Fast Refresh.
API routes untuk membangun API endpoints.

Mulai Instalasi

Seperti yang sudah saya bahas di awal, terdapat dua cara untuk menginstall Next.js. Baiklah, kita mulai dengan cara yang manual dahulu baru kemudian cara yang otomatis biar kita tahu perbedaannya.

Install Next.js Secara Manual

Install next, react, dan react-dom di project kamu.

mkdir my_app
cd my_app
npm init -y
npm install next react react-dom --save
mkdir pages

Buka package.json kemudian tambahkan script berikut ini.

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

Script di atas mengacu pada tahap pengembangan aplikasi.

dev – Menjalankan next dev yang mana untuk menjalankan aplikasi dengan development mode.

build – Menjalankan next build yang mana untuk membuild app untuk pemakaian production.

start – Menjalankan next start yang mana untuk menjalankan aplikasi dengan production mode.

Kemudian jalankan project Next.js dengan perintah.

npm run dev

Kemudian buka alamat localhost:3000, kamu akan menemui halaman error 404 Not Found. Itu terjadi karena kita belum membuat halaman untuk indexnya.

Silakan buat halaman index.js pada folder pages yang sudah kamu buat tadi.

pages/index.js

const HomePage = () => <div>Ini adalah Home - aantamim.ID</div>;

export default HomePage;

Ketika kamu membuka alamat localhost:3000, halaman tersebut akan secara otomatis dirender ulang dan akan muncul isi dari file index.js yang kita buat tadi seperti gambar di bawah ini.

Selanjutnya mari kita mencoba untuk membuat halaman baru di folder pages dengan nama file contact.js. Tambahkan baris kode seperti berikut ini.

pages/contact.js

const Contact = () => (
  <div>
    <p>
      <a href="mailto:myemail@email.com">Contact us!</a>
    </p>
  </div>
);

export default Contact;

Jika kamu mengakses localhost:3000/contact maka akan tampil hasil render dari file contact.js sesuai dengan yang kita buat.

Perlu kamu catat, ketika kamu menambahkan halaman baru atau melakukan perubahan pada halaman, kamu tidak perlu restart npm/yarn.

Client Rendering

Server rendering sangat sesuai untuk render pertama kali, namun ketika kita ingin membuat navigasi ke page yang berbeda, client side rendering akan membuat page kamu menjadi lebih cepat. Next.js menyediakan komponen yang bisa digunakan sebagai penghubung antar page. Mari kita coba dengan menghubungkan page yang sudah kita buat sebelumnya.

Ubah file index.js anda menjadi sebagai berikut:

pages/index.js

import Link from "next/link";

const HomePage = () => (
  <div>
    <h1>Ini adalah Home - aantamim.ID</h1>
    <hr />
    <Link href="/contact">
      <a>Contact me!</a>
    </Link>
  </div>
);

export default HomePage;

Kemudian akses localhost:3000 dan akses link Contact me!, Kamu akan berpindah ke halaman contact tanpa loading, ini merupakan client-side rendering.

Install Next.js Secara Otomatis

Ini adalah cara yang direkomendasikan ketika membuat project baru dengan create-next-app, karena dengan perintah tersebut sudah mengatur semuanya secara otomatis, sangat berbeda dengan cara yang pertama. Untuk membuat project, jalankan perintah.

npx create-next-app my_app2
# atau
yarn create next-app my_app2

Next.js dibangun dengan beberapa halaman yang disebut sebagai React component yang diekspor dari file .js, .jsx, .ts, atau .tsx di dalam direktori pages.

Kemudian jalankan project Next.js dengan perintah.

npm run dev

Seperti inilah tampilan awal Next.js.

Default page Next.js dengan Instalasi Otomatis

Seperti pada cara instalasi yang pertama, kamu bisa membuat komponen js (halaman) di folder pages.

Kesimpulan

Kita sudah belajar cara menginstall Next.js dengan dua cara yang berbeda. Namun, cara kedua (otomatis) yang paling direkomendasikan oleh Official React.

Kamu dapat membaca dokumentasi tentang Next.js di https://nextjs.org/docs.