0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Penyiapan Proyek & CLI

Pelajari cara menginisialisasi proyek Next.js 15 baru dan menelusuri struktur proyek dasar menggunakan antarmuka baris perintah.

Penyiapan Proyek & CLI adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Next.js 15: Langkah Pertamamu

Selamat datang di Next.js 15 — framework React untuk aplikasi yang cepat, skalabel, dan siap produksi. Pertama: membuat proyek dan memahami strukturnya dari CLI.

Yang Kamu Butuhkan

Sebelum memulai, kamu membutuhkan Node.js 18.17 atau yang lebih baru — yang menyediakan runtime JavaScript, dan package manager-nya (npm, Yarn, atau pnpm) untuk menginstal dependensimu.

Menginisialisasi Proyekmu

Buat proyek baru dengan create-next-app — ini akan membuat kerangka proyek secara otomatis untukmu. Cukup jalankan ini di terminalmu.

npx create-next-app@latest

Penjelasan Pertanyaan Setup

CLI akan menanyakan beberapa hal. Yang penting: jawab Yes untuk App Router — ini penting untuk Next.js 15. ESLint dan Tailwind itu bagus; TypeScript bersifat opsional.

Menjelajahi Proyek Barumu

Setelah selesai, kamu akan mendapatkan folder proyek baru. Masuk ke folder tersebut dengan cd dan kamu siap bekerja.

cd my-next-app

Struktur Proyekmu

Pahami file-file utama yang dihasilkan: app/ berisi halaman dan layout-mu, public/ aset statis, package.json dependensi dan script-mu, next.config.js konfigurasi.

Direktori Inti `app`

Direktori app/ adalah inti dari App Router: layout.js untuk UI yang dibagikan, page.js untuk tampilan unik sebuah route, dan globals.css untuk gaya global.

Script Proyek & `npm run dev`

Script-mu ada di package.json. Yang akan sering kamu gunakan adalah npm run dev — ini akan memulai development server.

npm run dev

Halo Next.js!

Setelah dev server berjalan, buka localhost:3000 untuk melihat aplikasimu. Halaman itu di-render oleh app/page.js — berikut adalah versi sederhananya.

export default function Home() {
  return (
    <main>
      <h1>Hello CoddyKit!</h1>
    </main>
  );
}

Cek Cepat: Dasar Setup

Kamu telah belajar cara memulai proyek Next.js. Mari uji pengetahuanmu!

Rekap: Langkah Awal Next.js-mu

Rekap: kamu telah menyiapkan Next.js 15 dengan create-next-app, menjelajahi direktori app/, dan menjalankan dev server. Selanjutnya: file-system routing.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyiapan Proyek & CLI” gratis?

Ya — teks lengkap “Penyiapan Proyek & CLI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyiapan Proyek & CLI”?

Pelajari cara menginisialisasi proyek Next.js 15 baru dan menelusuri struktur proyek dasar menggunakan antarmuka baris perintah. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Penyiapan Proyek & CLI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Penyiapan Proyek & CLI
  2. Dasar-Dasar Perutean Sistem Berkas
  3. Ikhtisar Halaman & Tata Letak
  4. Menata Gaya Aplikasi Next.js Anda
← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)