A modern headless blog built with Next.js 16, React 19, and TailwindCSS. This application decouples the frontend from the backend, allowing you to manage content via a headless CMS while displaying it through a fast, responsive Next.js interface.
- Headless Architecture: Separates content management from presentation
- Server-Side Rendering: Fast page loads with Next.js SSR capabilities
- Responsive Design: Built with TailwindCSS for mobile-first styling
- User Authentication: Login and user management support
- Comments System: Interactive comment functionality
- Category & Tag Support: Organize posts by categories and tags
- Dynamic Routing: URL-based post, category, and tag pages
├── app/ # Next.js app directory (layouts, global styles)
├── pages/ # API routes and legacy pages
├── components/ # Reusable React components
│ ├── Comment.js
│ ├── CommentForm.js
│ ├── CurrentUser.js
│ ├── Layout.js
│ ├── Login.js
│ ├── LoginMenu.js
│ ├── UserData.js
│ └── WPMenu.js
├── lib/ # Utility functions and API calls
│ └── api.js
├── public/ # Static assets
└── styles/ # Global styles
- Node.js 18+
- npm or yarn
- Clone the repository
- Install dependencies:
npm installRun the development server:
npm run devOpen http://localhost:3000 to see your blog.
Build for production:
npm run build
npm start- Framework: Next.js 16
- UI Library: React 19
- Styling: TailwindCSS 4
- HTTP Client: Axios
- Linting: ESLint 10
- Language: TypeScript 5
- TypeScript Config:
tsconfig.json - Next.js Config:
next.config.ts - TailwindCSS Config:
tailwind.config.js - PostCSS Config:
postcss.config.js
Deploy on Vercel for the best experience with Next.js:
- Push your code to a Git repository
- Connect your repository to Vercel
- Deploy with a single click
For other hosting options, check the Next.js deployment documentation.