Belajar Kode Program

Blog belajar menulis kode program dan aplikasi komputer

Minggu, 03 November 2024

Instalasi NextJS dengan Cara Manual

Sebenarnya ada cara otomatis untuk melakukan instalasi aplikasi NextJS. Namun, di sini akan dibahas cara instalasi dengan manual. Artinya, folder-folder harus dibuat sendiri, termasuk file-file penting yang akan menyusun aplikasi NextJS. Tujuannya apa? Ya agar kita dapat memahami dengan lebih dalam cara kerja NextJS, ketimbang dengan cara otomatis.

Cara otomatis tentu kawan-kawan sudah sangat familiar. Cukup ketikkan perintah 'npx create-next-app@latest' maka jadilah. Akan tetapi, cara itu sangat memanjakan. Untuk level belajar, cara manual perlu juga untuk dikuasai. 

Langkah pertama,  ketikkan perintah 'npm install next@latest react@latest react-dom@latest'.

Dengan langkah ini, selanjutnya kita bisa memanfaatkan perintah 'next nama_perintah' pada terminal konsol kita. Tetapi kadangkala perintah next tetap tidak dikenali. Justru muncul pesan 'next commnd not found'. Untuk itu, perlu dilakukan perbaikan dengan mengetikkan perintah di terminal seperti berikut:

'npm i -g next'

Langkah kedua, atur file 'package.json' tambahkan dengan sintaks berikut:

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

Langkah ketiga, buat folder dan file-file utama, sebagai berikut

  • Folder 'app', isi minimalnya adalah file 'layout.tsx' dan 'page.tsx'
  • Folder 'public', untuk menaruh file-file statis yang bisa diakses oleh publik, seperti favicon, image, dll.

Oiya, untuk folder app dapat disimpan di folder src. Tapi untuk folder public, jangan ya. Adapun isi file-file tersebut dapat dibuat minimal seperti berikut:

File 'app/layout.tsx'

File 'app/page.tsx'

Selanjutnya, tinggal perintahkan di terminal 'next dev'

Selamat mencoba!

Tidak ada komentar:

Posting Komentar