Departures
WDELogbook entry
Nextjs 16 adalah versi yang baru dari Next, framework React populer. Prisma merupakan ORM yang mempermudah akses data ke database. Artikel ini memberikan contoh setup awal untuk Nextjs 16 dan Prisma 7.
Sebagai sebuah framework modern, Nextjs menawarkan banyak keunggulan, seperti kemudahan setup dan kecepatan dalam compile.
Untuk mengingstall next js cukup dengan perintah berikut
npx create-next-app@latestLalu anda diminta untuk memberikan nama untuk project anda, kemudian akan ada 3 pilihan yang bisa anda pilih, saya pakai yang default setting saja.
Would you like to use the recommended Next.js defaults?Tinggal menunggu, otomatis terinstall semua kebutuhan yang diperlukan, kalau sukses, outputnya akan kurang lebih sepeerti berikut
Untuk menginstall prisma, jalankan perintah ini
Prisma hanya dibutuhkan di development, makanya kita pakai --save-dev agar terinstall sebagai devDependencies.
Untuk di client, kita butuh prisma/client, untuk menginstallnya jalankan perintah berikut
Setelah terinstall, init prisma dengan perintah
Jika sukses, outpunya seperti ini
Berbeda dengan prisma dibawah 7, sekarang saat ini sudah ada file prisma.config.ts.
Secara umum, setup awal sudah selesai, di artikel selanjutnya kita akan lanjutkan untuk setup database nya.
You must be logged in to comment
No comments yet. Be the first to comment!
Written by
Liu PurnomoI'm a Software Engineer who turns coffee into code, and sometimes I even make interactive web things that work! ☕💻 I'm also a certified multitasker: an Expert Drone Pilot (ask me for aerial selfies!), a Certified Instructor/Public Speaker (I talk a lot), and a Seasonal Runner who believes in running only when the weather is perfect. Let's connect!
More articles headed the same way as this one.
√ Would you like to use the recommended Next.js defaults? » Yes, use recommended defaultsCreating a new Next.js app in C:\Users\liu\Documents\Projects\ikat.id.Using npm.Initializing project with template: app-tw Installing dependencies:- next- react- react-domInstalling devDependencies:- @tailwindcss/postcss- @types/node- @types/react- @types/react-dom- eslint- eslint-config-next- tailwindcss- typescriptadded 426 packages, and audited 427 packages in 35s174 packages are looking for funding run `npm fund` for detailsfound 0 vulnerabilitiesGenerating route types...✓ Types generated successfullyInitialized a git repository.Success! Created ikat.id at C:\Users\liu\Documents\Projects\ikat.idnpm install --save-dev prismanpm install @prisma/client1npx prisma initInitialized Prisma in your project prisma/ schema.prisma prisma.config.ts .envwarn You already have a .gitignore file. Don't forget to add .env in it to not commit any private information.Next, choose how you want to set up your database:CONNECT EXISTING DATABASE: 1. Configure your DATABASE_URL in prisma.config.ts 2. Run prisma db pull to introspect your database.CREATE NEW DATABASE: Local: npx prisma dev (runs Postgres locally in your terminal) Cloud: npx create-db (creates a free Prisma Postgres database)Then, define your models in prisma/schema.prisma and run prisma migrate dev to apply your schema.Learn more: https://pris.ly/getting-started