Pengenalan Next.js

Posted by admin

Saya merupakan salah satu pemula yang sedang belajar untuk membangun sebuah website yang bagus dan efisien dan saya memilih Next.js sebagai framework yang digunakan dari sisi frontend. Kenapa? Mari kita lihat lebih dalam mengenai next.js

Sebelumnya saya mohon maaf karena saya masih newbie jadi informasi yang saya berikan untuk para pemula juga, nanti untuk article selanjutnya akan kita bahas lebih dalam ya, happy reading.

Oke langsung saja apa itu sebenarnya next.js ?

Next.js merupakan salah satu framework node.js yang cukup populer yang memungkinkan SSR dengan lebih mudah, dan tentunya dengan fitur2 menakjubkan lainnya.

Pengenalan

Membangun aplikasi dengan react sangatlah menakjubkan namun ada beberapa masalah yang berkaitan dengan CSR dimana content yang kita miliki di render di client.

Yang pertama, page akan membutuhkan waktu yang lebih lama agar dapat tampil karena sebelum content di load, semua js harus di load terlebih dahulu dan aplikasi anda perlu menjalankan apa yang harus ditampilkan pada page.

Yang kedua adalah masalah SEO, search engine akan lebih mudah untuk memproses page yang sudah utuh, sedangkan dengan CSR page yang ditampilkan untuk pertama sekali tidak utuh melainkan masih harus request data lagi kemudian disisipkan di element yang telah ditentukan sebelumnya.

Next.js merupakan salah satu framework react yang dapat menangani permasalahan tersebut dengan cara yang sederhana. Structure react memungkinkan kita untuk membangun frontend React application dengan mudah dan mampu menangani server side buat anda. Sangat menarik bukan??

Fitur Utama

Berikut beberapa fitur utama pada next.js :

Hot Code reloading
Next.js akan mereload page ketika di deteksi terdapat perubahan yang disimpan
Automatic routing
Next.js memiliki direktori pages sehingga untuk routing akan disesuaikan dengan file yang kita simpan di direktori pages namun tentunya kita juga masih dapat memodifikasi sesuai dengan kebutuhan kita.
Single file component
Dengan adanya styled-jsx kita menjadi sangat mudah untuk membuat style langsung di komponen yang kita buat.
Server Rendering
Kita bisa merender (optional) component react pada server side sebelum mengembalikan page html ke client sehingga akan baik untuk SEO tentunya
Automatic Code Splitting
Page yang akan di render hanya dengan library yang digunakan pada page tersebut, sehingga akan lebih ringan
Dynamic component
Kita dapat mengimport javascript module atau react component secara dinamis (https://github.com/zeit/next.js#dynamic-import).
Static export
Dengan menggunakan keyword next export, kita dapat mengexport static site dari app kita.

Instalasi

Sekarang mari kita mencoba untuk membuat projek menggunakan next.jsUntuk memulai, jalankan perintah berikut:

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

Kemudian buka file “package.json” pada direktori hello-next dan tambahkan script berikut

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

Setelah selesai jalankan next.js anda dengan perintah

npm run dev

Kemudian buka http://localhost:3000/ pada browser anda. Anda akan melihat page 404

Kemudian buat direktori pages pada root folder anda dan buat file index.js dan masukkan code berikut:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Ketika anda membuka http://localhost:3000/ page anda akan otomatis di render ulang dan akan muncul tampilan seperti berikut:

Menambahkan page baru

Selanjutnya mari kita mencoba untuk membuat page yang baru pages/contact.js dan tambahkan code berikut pada contact.js anda.

export default () => (
  <div>
    <p>
      <a href="mailto:my@email.com">Contact us!</a>
    </p>
  </div>
)

Jika anda membuka url http://localhost:3000/contact maka akan tampil link yang bertuliskan Contact us! Sesuai dengan yang kita masukkan pada komponen contact.js kita

Hot reloading

Perlu anda catat, ketika anda menambahkan page baru atau melakukan perubahan pada page, anda tidak perlu restart npm anda.

Client Rendering

Server rendering sangat sesuai untuk render pertama sekali, namun ketika kita ingin membuat navigasi ke page yang berbeda client side rendering akan membuat page anda lebih cepat. Next.js menyediakan komponen <Link /> 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:

import Link from 'next/link'
export default () => (
  <div>
    <p>Hello World!</p>
    <Link href="/contact">
      <a>Contact me!</a>
    </Link>
  </div>
)

Kemudian kembali ke page anda dan akses link Contact!me. Seperti yang anda lihat, anda akan berpindah page ke page contact akan ditampilkan tanpa ada load, dan ini merupakan client-side rendering.

Anda bisa mencoba dengan ctrl+click url tersebut, maka page tersebut akan otomatis di buka di tab baru, dan ini merupakan ssr. Next.js pada dasarnya support pada isomorphic render.

Sekian untuk pengenalan next.js kali ini, see u in the next article

Kumpulan Tutorial Kito

Senin, 16 Maret 2020

NEXT.JS-framwork