Build a Next JS 13.3 App with Auto ChatGPT Content | Next 13.3, Prisma, TipTap, Typescript, Deploy
HTML-код
- Опубликовано: 2 июн 2024
- To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/EdRoh/.
The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Build a Complete Fullstack Next JS 13.3 App that will Automatically generate Blog Post Content with ChatGPT. We will use the latest Next JS 13.3 with the app directory, and then Prisma as our ORM, TipTap for our text editing, Typescript for our language, and we will be deploying all of this for free on Vercel.
Links:
nextjs installation: beta.nextjs.org/docs/installa...
nextjs app roadmap: beta.nextjs.org/docs/app-dire...
nextjs new metadata: beta.nextjs.org/docs/api-refe...
nextjs revalidation: beta.nextjs.org/docs/data-fet...
nextjs revalidation not working: github.com/vercel/next.js/dis...
nextjs config segments: beta.nextjs.org/docs/api-refe...
nextjs font optimization: nextjs.org/docs/basic-feature...
nextjs limitations: vercel.com/docs/concepts/limi...
nextjs route nav: beta.nextjs.org/docs/routing/...
planetscale: planetscale.com/
planetscale cli: github.com/planetscale/cli#in...
planetscale certs: planetscale.com/docs/concepts...
prisma/planetscale cert github: github.com/prisma/prisma/issu...
prisma schema docs: www.prisma.io/docs/concepts/c...
prisma seeding: www.prisma.io/docs/guides/dat...
tiptap: tiptap.dev/
tiptap installation: tiptap.dev/installation/react
openai: platform.openai.com/
openai-node: github.com/openai/openai-node
openai-gpt4-signup: openai.com/waitlist/gpt-4-api
Code
completed code: github.com/ed-roh/next-ai-blo...
tailwind config: github.com/ed-roh/next-ai-blo...
assets: github.com/ed-roh/next-ai-blo...
Chapters:
0:00 Build a Full NextJS 13.3 Application Full Stack
4:13 Basic Installations
5:35 Next JS Installations
12:05 Tailwind Installation
23:01 Next JS File Folder Architecture
32:36 Navbar
57:05 Footer
1:04:45 CSS grid and flex Home Page Layout
2:07:30 Prisma Installation and Setup
2:26:55 Server Components
2:48:25 Next JS Images
3:14:15 Dynamic Routes Individual Post Page
3:45:30 Rich Text Editor Tip Tap
4:37:14 ChatGPT Openai Content Generator
5:05:30 Deployment on Vercel
This video was sponsored by Brilliant.
-----------
Subscribe to my channel: / @edrohdev
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients. 
Наука
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/EdRoh/.
The first 200 of you will get 20% off Brilliant’s annual premium subscription.
hi, what AI extension are you using that gives you the floating explain button next to your cursor when you highlight some ?
I tried searching but couldn't find any with a same icon. Closes I cam was originality ai - which also has the same brain icon, But I doubt that's the one you are using.
Hello, thank you very much for this tutorial. A request "or more like a challenge" can you make a tutorial on how to send notification to an iOS/Android app using from admin dashboard. Another request can you make a tutorial on how to create a chat that happens between super admin and admins where admins can see and chat with just super admin while super admin can see and chat with all admins. can you show how to add buttons to tables to edit or edit data stored in mongodb.
Best tutorial instructor ever! I love your job, man. You're so concise!
Thank you soo much Ed! ❤️
You always come up with most detailed and unique tuitorials
I haven't finished this project yet, but I want to tell you that you are a crack. I love how you take the time to explain things. One of the best.
So much respect for you man , you put so much effort and hard work for these projects and giving this knowledge for free. Thank you for that
I am a young Japanese, and thanks to this tutorial, I have a clearer understanding of how to use grid and flex!
Also, the idea of a Blog app with AI to help me create articles was very enjoyable for me.
Thank you for the great tutorial!
You and your projects are awesome! Please keep up the good work ;)
I love how u explained the body and how you showed you can use flex box or grid. Learning some priceless information here.
I just finished this course and can say that this was one of the best that I have done. There are a few creators for learning on RUclips and you are up there. I look forward to trying another one of your courses in the near future.
can you tell me how to install planetscale in windows please
Man You deserve a golden prize for providing this free tutorial 🎉❤
Incredible, videos are high production quality.
Thank you Edroh for providing knowledge for free.
😀 Thanks
@@EdRohDev This is incredible Ed!! The production quality is excellent. The graphics, staging, animation, everything...
For some reason Im getting exited with this, Can't wait to watch this.. Keep up the good work :)
Thank you for creating such a quality video lesson...this turned out to be a huge learning curve for me❤
Hey, your teaching style is awesome, can you please start a next js series from basic to advance, it will be really helpful.
This is awesome !! and i really like the way you explain in details !!!... thankx for sharing this great content !! 😎🖖
Back with another banger!
🔥🔥🔥
thanks a lot bro for everything you do for us... really appreciated. all respect 🌹🌹🌹🌹🌹🌹🌹
BEST TUTORIALS!! SHIPPING HOT
Thank you for all these projects
Can't wait to watch it and play with it! Keep it up!
Thank you
Thanks edroh it was really informative ❤
thank you 🙏
i am in love with this video......................very detailed video
Well done, each I learn something new from you. You can explain very well😅.
thank you edroh , you are the best
Legend! Thanks Ed
Thank you for your effort! It's great content. I am waiting for a full stack e-commerce project with Next.js 13.3 including app folder structure. I hope you will consider it. 🤞
Thank you so much edroh.
Great tutorial!
Thank you so much for sharing, Sir.
Hi there EdRoh, i was learning react when i created a project in it and now CRA was off and confused between using Vite or just switch to NextJS. However, I wanted to ask are you ever going to do a proper use based tutorial like a SaaS with user accounts and different roles, login with JWT or GoogleAuth ? Thanks!
Wlcme the goat am so happy to see you💙💚
Glad to see you!
thank you Ed! Can't wait to try Next, are you still using mui or changed 100% for tailwind?
I still use both. Next js 13 server components do not work with mui atm, though mui is working on fixing that. MUI is great for internal apps or business 2 business apps. MUI is quite underrated right now
I enjoyed your videos! Do you have any plans to create a tutorial on building an inventory management system using Next.js? Your tutorials are fantastic, and I'd love to see one on this topic! I also want to include some Python and machine learning, as well as utilize free APIs for data integration.
Hey Edroh,
Thanks for this amazing tutorial.
Would like to see a tutorial for using Quill Forms as a React app. It is a very amazing form.
thats a very interesting and unique project
Thanks!
you're a real one man.
Amazing!! Please make ecommerce also
thank you for the video. Your videos are awesome. can you please make a video on how we can create a dynamic monitoring or reporting personalized dashboard? personalized means the user is able to choose the type, size and location on ui for each card he needs. I have seen such dashboards on many sites but never understood how they create and save it as per user preferences.
What should be the DATABASE_URL(SSL part) under Environment Variables section when deploying to vercel for Windows User. I would really appreciate some help on this. Timestamp->5:10:35
Thanks Edroh
I have no knowledge in Next, will I be able to follow along?
Hi ed roh. I tried following alongside you on my windows pc. But my modules and folder structures are kind of different at various places. I'm also missing out on some files compared to yours. How to follow along then exactly. Can you help me with this.
Thank you !
Ed please make a social media app tutorial with Nextjs app router, tailwind, typescript, mongo, prisma, etc please please please your explanations are the best and i want to learn that stack
Hello I just completed the social media app project it was fantastic but while hosting it on live server I encountered auth problem of login and register page can you make a video on how to host these apps please or help us somehow it will be a big help.
The time format is in the Intl object. No imports just, const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'long',
day: 'numeric',
};
Got that of StackOverflow Dominic Roy-Stang.
My friend, the next time you use a data site, choose it for free, and you can always work on it, and in several projects I am talking about planetscale and thank you for your time and don't forget the extension database client extension and show people how MySQL workbench work It is new information that I now learned through you because of the errors that I encountered in the project
would you prefer learning nextjs as a beginner?
I downloaded your github repo to check a couple things, and FYI, it doesn't run. Getting several errors... Currently stopped at an issue with useContext. Not sure if I should continue the tutorial when it appears the end result isn't even a working app..
Outstanding
good work rohh
can I use this source code for my own blog post?
make project like this .. this video improve my CSS as well as logic..
Nice work but do more projects with next and tailwind and stripe and do some design beautiful for pic video , and thanks
Bombs have been dropped 🎉❤
💣💣💣
I am unable to deploy this project on vercel (Windows User). Can somebody help me with it, as to what extra/different steps one needs to take in order to make the deployment successful.
Awesome!!!
Thank you
Hi can you make like this with dark mode and with authentication.
At 4:57:10 I keep getting "The types of 'config.headers' are incompatible between these types.
Type 'AxiosRequestHeaders | undefined' is not assignable to type 'AxiosRequestHeaders'" and a "TypeError: Cannot read properties of undefined (reading 'headers')". would really appreciate the help
same mistake... if you found out why please let me know
Bro... Kindly make videos on d3js charts
Sir , can you create a project using react refine with ant design,typeorm and nest js at backend and deploy it. Eg like calendar view with recurrence , Kaban view , tables and forms,crud operations and sign up and singin
Haven't watched entire video yet, hoping u explain like this the entire video
🙏 hope it works out for you
Make tutorials on document tracking system web based in MERN stack with source code
Bro we expect more video ASAP...
For windows users, there is no possible way to accomplish the project using current configuration of Prisma.
I wish we were told that before spending so much time 🤡
You need to add the downloaded certificate to your Windows machine to solve the issue. It works
@@niazizarif3810 are you talking about ssl error
So, you have to pay (open-ai) in order for this to work?!?! I have a 500 Internal Server Error 🤨
My friend I install database client extension on vscode do video show how we connect and work with this project and this extension for developer weijan Chen v6.4.1 is nice extension
please when you code , just scroll to center the screen .Thank you
you create one well structured course teaching us basics of each like html css bootstrap react plus libraries and then backend side stuff please please please please...
Can build admin panel template with database
i have error : Error: Cannot find module './public/assets/img/ai-1.png' at Nextjs Image. How to fix that ?
try to add that image in the same folder as the file u r trying to bring that on
For a static blog? Ok.
graphql vs prisma what we prefere more
@@Edrohsupportchat mean ?
Hey everyone. I'm getting a "500 Internal Server Error" when trying to send a POST request to OpenAI (when I click the RocketLaunchIcon). I really don't know how to fix it. Any tips?
you fix it yet?? stuck on the same error man!
@@abhaynarayan7135 Not yet. I feel you. So frustrating!
same here. too many requests with 429? dont get it.
That happened to me and my free access to the openai app had expired. It starts when you sign up for chatgpt, so if you didn't use it then, it probably expired. I've made about 75 request and it's cost is about $0.02 total so far. My prompt is for 5 paragraphs too.
Solved? pls let me know if found the solution
🔥🔥🔥🔥
thanks🔥
Man pls how i can reach to your level
I am from syria i need to be good programmer to get out from syria
My friend you don't show how we can install MySQL and connect with vscode
Is it needed?
@@randerins yes
@@hamzabadii3575 I had no clue. Must be why I'm getting 500 Internal Server Error
EdRoh plz make Ecommerce Project with Next Js with sanity Backend ,
Why using sanity? Instead of using node JS/Express
@@poknari Express would would be way more interesting
What is the chrome extension called, exactly? The one that shows the divs on a page.
Thanks!
toggle pesticide
Hi sir your deployment is not working pls update it
@@Edrohsupportchat ??
1:53:47
RIP😢
Sign in page please sir 🙏
I think we'd be more interested in an actual chat application instead of a gpt chat app
47:42
Hey, are u still alive?
planetscale is no longer free
Is that a website for deployment?
Tu é pica! Vlw demais
Are u still alive?
Could you share your discord link
It is on my channel page close to the top right, you can find the link there
1:47:52
1:15:52