A clean, modern, and responsive blogging platform.
Built with Next.js 14, MongoDB Atlas, Tailwind CSS, and React-Quill.
Test Admin Account:
Email:[email protected]
Password:admin@123
- 🖼️ Beautiful UI: Glassmorphism, smooth animations, mobile-first
- 🔐 Secure Admin Auth: NextAuth.js + bcrypt, JWT sessions
- ✍️ Rich Content: WYSIWYG editor, SEO-friendly slugs
- 🗂️ Full CRUD: Publish, update, delete posts (admin)
- ⚡ SEO & Performance: SSR, image optimization, dynamic meta tags
- 👨💻 Dev Experience: TypeScript, clean architecture, error handling
Show Setup Instructions
- Node.js v18+
- MongoDB Atlas (free-tier)
- Git
git clone https://github.com/thefznkhan/nextblog.git
cd nextblog
npm installCreate .env.local:
MONGODB_URI=your-mongodb-connection-string
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-32-byte-secret
NEXT_PUBLIC_BASE_URL=http://localhost:3000npm run devVisit http://localhost:3000
| Tool | Purpose |
|---|---|
| Next.js 14 | Full-stack React framework |
| React 18 | Frontend library |
| MongoDB | Cloud database |
| Mongoose | MongoDB ODM |
| NextAuth.js | Authentication |
| React-Quill | Rich text editing |
| Tailwind CSS | Styling |
| bcryptjs | Password hashing |
Show API Endpoints
GET /api/posts— List all postsPOST /api/posts— Create post (admin)GET /api/posts/[slug]— Get single postPUT /api/posts/[slug]— Update post (admin)DELETE /api/posts/[slug]— Delete post (admin)
GET /api/admin/setup— Check if admin existsPOST /api/admin/setup— Create initial admin
- MongoDB: Whitelist your IP in Atlas
- NEXTAUTH_SECRET: Must be consistent for sessions
- Tailwind: Customize in
tailwind.config.js
- MongoDB connection error: Check
.env.local, whitelist IP - NextAuth JWT errors: Ensure
NEXTAUTH_SECRETis set, clear cookies - Tailwind issues: Run
rm -rf .nextand restart
- Fork the repo
- Branch:
git checkout -b feat/your-feature - Develop & Test
- Lint/Test:
npm run lint && npm test - Pull Request
This project is MIT licensed — see LICENSE.
Thanks to the Next.js, MongoDB, Tailwind CSS, and React-Quill communities!
Made with ❤️ by THEFZNKHAN.
If you enjoy this project, please ⭐ star on GitHub!