Cara Membuat Halaman Sederhana dengan Next.js - Panduan Lengkap

Berikut adalah contoh penggunaan Next.js untuk membuat halaman sederhana: \n\n1. Buat folder baru untuk proyek Next.js dan masuk ke dalamnya melalui terminal atau command prompt.\n\n\nmkdir nama-folder\ncd nama-folder\n\n\n2. Jalankan perintah berikut untuk membuat proyek Next.js baru:\n\n\nnpx create-next-app .\n\n\nPerintah create-next-app akan membuat struktur proyek Next.js yang sudah siap digunakan.\n\n3. Setelah selesai, jalankan server Next.js dengan perintah:\n\n\nnpm run dev\n\n\nServer Next.js akan berjalan di http://localhost:3000.\n\n4. Buka browser dan akses http://localhost:3000. Anda akan melihat halaman selamat datang Next.js.\n\n5. Untuk mengubah halaman default, buka file pages/index.js dan ubah kontennya sesuai kebutuhan. Misalnya, kita akan menambahkan paragraf baru pada halaman:\n\njsx\nimport React from 'react';\n\nconst Home = () => {\n return (\n <div>\n <h1>Selamat Datang di Next.js</h1>\n <p>Ini adalah contoh halaman menggunakan Next.js</p>\n <p>Ini adalah paragraf baru yang ditambahkan</p>\n </div>\n );\n};\n\nexport default Home;\n\n\n6. Simpan perubahan dan periksa browser Anda. Anda akan melihat paragraf baru yang ditambahkan di halaman.\n\nItulah contoh sederhana penggunaan Next.js untuk membuat halaman. Anda dapat menambahkan komponen, rute, dan logika lainnya sesuai kebutuhan proyek Anda.\n\nCatatan: Pastikan Anda telah menginstal Node.js sebelum memulai.\n\nNext.js adalah kerangka kerja React yang digunakan untuk membangun aplikasi web dengan kecepatan tinggi. Dalam contoh ini, kita akan membuat halaman sederhana menggunakan Next.js.