Loading video player...
Welcome back to the channel and today we
are building together in live a complete
NexJS application connected to a post
database and of course we are going to
do this in one single prompt and you
will see the schema the migration and
the CD data it's all included and after
watching this video you will be able to
ship your next SAS application upgrade
your portfolio or simply just bootstrap
any project you want and this of course
will work with any LLM this video is for
everyone from beginners to senior
developers if you don't know me I'm
Arthur and I'm a developer advocate at
Prisma and this video is part of a long
series to help you ship faster. So hit
subscribe and let's jump into the code
right now. Okay, so now let's dive into
the code and let's create our next JS
application. I'm going to name it prompt
AI nextJS posg database and hit enter.
I'm going to say yes. I will use the
recommended default TypeScript ESLint
etc. Let's wait for all of the packages
to be installed. This should be fairly
quick. Yes, it's done. So now let's open
this directory with cursor. I'm going to
choose cursor. You can choose wind surf
or any other software you want. Let's
open with cursor. All right. Zoom. Looks
good. On the left, I'm going to create a
prompt. MD file at the source level.
prompt MD file. Okay. And this is where
we are going to copy paste the actual
content of the prompt. To find this
prompt, you can actually use the link in
the description below. This is the link
to the actual step-by-step guide for
this video. I'm going to open it in live
for you. You can go to the actual
prisma.io website. You can click on
docs. Then you can click on more Prisma
and AI and on the left click next plus
Prisma and you will see a stepby-step
guide that you can use to follow along
the video. I'm going to scroll down. I'm
I'm going to just copy paste the actual
prompt. I'm going to go back to the
actual code and I'm going to paste it.
Save it. Close it. That's it. If on your
ID the actual AI panel is not open, you
can click here toggle AI pan up. I'm
going to use it. And I'm going to just
add a few instructions. Please follow
the guidelines in the reference file.
I'm going to need to reference the
actual file. Okay. And this is called
prompt.md.
That's it. That's good. So this file is
linked now. and configure Prisma OM with
Prisma progress in this existing NexJS
project. I'm going to use CLON 4.5
thinking mode. You can choose CH GPT
anything and I'm going to choose the
agent mode and I'm going to just click
on send. If you have any question after
this video, do not hesitate to let us
know in the comment section. So, let's
go back to the code. On the right, you
can see there is a to-do list. This is
coming from, of course, the old prompt.
MD file and we will just have to click
run on a couple of command
run. You can see that on the left there
is a package of design package a couple
of packages installed also for Prisma
excession accelerate. Yes. Click next.
Next. Again you can see on the left we
have a Prisma folder that has been
created. He is creating a Prisma config
file, a schema file. Also we are going
to take a look at this. He created the
actual seed script for the data. That's
good. So, we can have a user already in
the database. You will see he's updating
the actual page.tsx file to actually
display and fetch the user from the
database. Very interesting. We are
coming to the end. Okay. So, I'm going
to just click keep all.
I'm going to just close that. Let's take
a look at the code quickly. We have on
the left the schema file with a user
model. Okay, let's close that. Okay,
let's open app. Let's open API. A very
interesting file is the root.ts file. We
already have a get and a post function.
Let's close it. And now let's try to
actually run it locally to take a look
if it worked, if we have a user in the
database and if we actually can fetch
the user data. So let's open a terminal.
I'm going to open it directly here.
Let's use this command Prisma generate.
Okay. And then we will be able to open
Prisma Studio. Let's run it first. We
will be able to actually see our data in
live using this command npm run DB
studio. This is because we obviously
have a script already created in our
package.json. Okay, let's run it.
Okay, let me show you what we have.
All right, let me open it full screen.
Zoom in. We already have a user in our
database. Look at this. ID demo exam
demo user. This is from the actual seat
data script that is included in this
template. Nice. Let's see if we can
fetch the actual data.
Okay, let's just run the application
now. npm rundev
local 3000. Let's open. That's it. This
is a very simple page, but this is just
for the sake of having a good template
to start anything you want. I hope you
did enjoy the video. Don't forget to
subscribe. Don't forget to follow us.
Feel free to add any comments. If you
have a project you want to share, if you
have a question, and I will see you soon
for another video. Bye, everyone.
Build a Full-Stack Next.js + Prisma + Postgres App in ONE PROMPT Learn how to set up Prisma with Next.js and Postgres including environment setup, Prisma Client configuration, database connection, and Accelerate integration. 👉 Here is the link to the step by step guide: https://pris.ly/nextjs-ai-prompt This step-by-step guide shows how to build and deploy a full-stack app using AI-powered coding tools like GitHub Copilot, Cursor, Zed, or Windsurf. You can follow along using any LLM like ChatGPT, Claude, or any AI assistant. 💡 What you’ll learn: - How to set up Prisma with Next.js + Postgres - Connect and test your database with best practices - Use one AI prompt to generate a full project boilerplate #Nextjs #NextjsTutorial #Prisma #PrismaPostgres #FullStack #WebDev #AiCoding #SaaS #BuildWithAi #PrismaAccelerate #JavaScript #TypeScript #FullStackDeveloper #WebDevelopment #AiTools #CodingTutorial #DevTool Join the Discord here: https://pris.ly/discord —————————————————— 📚 Learn more about Prisma • Website:https://www.prisma.io/ • Docs: https://www.prisma.io/docs • Quickstart: https://pris.ly/qstart —————————————————— 👋 Connect with the Prisma Community • Discord: https://pris.ly/discord • GitHub: https://www.github.com/prisma/prisma/discussions —————————————————— 💬 Follow Prisma on social media • Twitter: https://twitter.com/prisma • LinkedIn: https://www.linkedin.com/company/prisma-io —————————————————— ✅ Subscribe to Prisma's YouTube channel https://www.youtube.com/channel/UCptAHlN1gdwD89tFM3ENb6w?sub_confirmation=1