Next.js Blog

A modern blog application built with Next.js, featuring server-side rendering, static site generation, and a clean, responsive design.

Features

• Server-side rendered blog posts
• Static site generation with ISR (Incremental Static Regeneration)
• Responsive grid layout for posts
• Light/dark theme toggle
• Reading time estimation

Tech Stack

• Next.js - Server-side rendering
• TypeScript - Type safety
• SCSS modules - Component-scoped styling
• json-server - Mock API backend
• Jotai - State management
• ESLint - Code linting
• Prettier - Code formatting

Getting Started with Development

Requirements

• Node.js v23.x
• Yarn v1.x

1. Install dependencies:

   yarn

2. Run mock API server:

   yarn server

3. Run development server:

   yarn dev

After running the scripts above, the application is available at http://localhost:3000.

Project Structure

Folders

• components - React components
• pages - Next.js pages
• styles - SCSS modules, variables, and global styles
• types - TypeScript type definitions
• utils - Helper functions and utilities

Project-specific Files

• db.json - The data served by the mock API with json-server
• store.ts - Jotai store configuration

Environment Variables

• API_URL - The base URL for the API endpoint serving the blog posts
• REVALIDATE_TIME - The time interval (in seconds) for Next.js to revalidate static pages using ISR (Incremental Static Regeneration)

package.json Scripts

Important

Make sure to run server before running dev, build, or start.

• server - Run mock API
• dev - Run development server
• build - Build for production
• start - Run production server
• lint - Lint code with ESLint
• formatting:check - Check code formatting with Prettier
• formatting:apply - Format code with Prettier

---

Design based on: The Blog - A Web Personal Blog