Build a Next JS 13.3 App with Auto ChatGPT Content | Next 13.3, Prisma, TipTap, Typescript, Deploy

To try everything Brilliant has to offer—free—for a full 30 days, visit http://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: https://beta.nextjs.org/docs/installation
nextjs app roadmap: https://beta.nextjs.org/docs/app-directory-roadmap
nextjs new metadata: https://beta.nextjs.org/docs/api-reference/metadata
nextjs revalidation: https://beta.nextjs.org/docs/data-fetching/revalidating
nextjs revalidation not working: https://github.com/vercel/next.js/discussions/42290
nextjs config segments: https://beta.nextjs.org/docs/api-reference/segment-config#revalidate
nextjs font optimization: https://nextjs.org/docs/basic-features/font-optimization
nextjs limitations: https://vercel.com/docs/concepts/limits/overview
nextjs route nav: https://beta.nextjs.org/docs/routing/defining-routes
planetscale: https://planetscale.com/
planetscale cli: https://github.com/planetscale/cli#installation
planetscale certs: https://planetscale.com/docs/concepts/secure-connections
prisma/planetscale cert github: https://github.com/prisma/prisma/issues/11246
prisma schema docs: https://www.prisma.io/docs/concepts/components/prisma-schema
prisma seeding: https://www.prisma.io/docs/guides/database/seed-database
tiptap: https://tiptap.dev/
tiptap installation: https://tiptap.dev/installation/react
openai: https://platform.openai.com/
openai-node: https://github.com/openai/openai-node
openai-gpt4-signup: https://openai.com/waitlist/gpt-4-api

Code
completed code: https://github.com/ed-roh/next-ai-blog-app
tailwind config: https://github.com/ed-roh/next-ai-blog-app/blob/main/tailwind.config.js
assets: https://github.com/ed-roh/next-ai-blog-app/tree/main/public/assets

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: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1

———————————

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.