In this tutorial, we will build a full stack blog application using Next.js 13 From Scratch With API. We will use React 18 Server Components, Tailwind CSS, Prisma, MongoDB & More to build a modern, production-ready blog application.
External Links
Source Code: https://github.com/Nikhilthadani/nextjs-13-blog/tree/develop
Prisma: https://www.prisma.io/
MongoDB: https://www.mongodb.com/
Next.js: https://nextjs.org/
React: https://react.dev/
Tailwind CSS: https://tailwindcss.com/
What you will learn:
How to set up a Next.js 13 project
How to use React Server Components with Next.js
How to use Tailwind CSS with Next.js
How to use Prisma to connect to a MongoDB database
Create A REST API With Prisma MongoDB CRUD Operations
How to add both Client and Server Components in Next.js 13 App Router
Timestamps:
0:00 Introduction to Project
1:00 Create A Next.js 13 Application From Scratch
6:47 Creating API
7:28 Install Prisma and Setup With MongoDB And Create Schemas
14:49 Creating GET API Handler
21:20 Creating A POST Handler
27:02 Creating a Dynamic API Route Handler With GET Request
33:09 Creating A PUT Request to update Blog
35:27 Creating A DELETE Handler
37:32 Moving Into Frontend And Creating A Server Component With HTTP Request
43:17 Designing Homepage of Application With Tailwind
59:17 Creating A Client Component For Adding A New Blog
1:15:46 Creating Edit and Delete Functionality On Frontend
1:33:23 Summary and Good Luck!
Enjoyed? Please Give A Super Thanks!
Follow Me On Social Media:
Github: https://github.com/nikhilthadani
Instagram: instagram.com/indiancoders.in
www.indiancoders.in
