blognow-nextjs-starter — Next.js 博客模板

SHA-256: c3c1ee19595cc074f14d910c0f0fca73a7844f3d4002d6405e442a94aaf3c9c9

2026-10-14T14:40:30.222Z

# Next.js BlogNow Starter Kit

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/synkc0/nextjs-blog-now-starter-kit&env=NEXT_PUBLIC_BLOGNOW_API_KEY&envDescription=Get%20your%20BlogNow%20API%20key%20from%20https://blognow.tech/dashboard&project-name=my-blognow-blog&repository-name=my-blognow-blog)

View Demo - https://blognow-nextjs-starter.vercel.app/blog

A modern, SEO-optimized blog starter template powered by [BlogNow.Tech](https://blognow.tech) and built with Next.js 15, TypeScript, and Tailwind CSS.

## ✨ Features

- 🚀 **Next.js 15 App Router** - Built with the latest Next.js features
- 📝 **BlogNow Integration** - Seamless blog content management
- 🎨 **Tailwind CSS v4** - Modern, responsive design with custom dark mode
- 🔍 **SEO Optimized** - Complete metadata, Open Graph, Twitter Cards, sitemap & robots.txt
- ⚡ **Hybrid Rendering** - SSG for blog posts, server-side pagination for listing
- 🔎 **Real-time Search** - Client-side search with instant filtering
- 📄 **Server-Side Pagination** - On-demand data fetching with URL-based navigation
- 🎯 **Type-Safe** - Full TypeScript support with BlogNow SDK
- 📱 **Responsive Design** - Mobile-first approach with optimized images
- 🌓 **Dark Mode Toggle** - Manual theme switching with localStorage persistence
- 💾 **Smart State Management** - Zustand with intelligent page caching
- 📊 **Optimized Performance** - Page-level caching to minimize API calls
- 🎨 **Rich Typography** - Enhanced blog content styling with proper spacing

## 🚀 Quick Start

### 1. Get Your BlogNow API Key

1. Visit [BlogNow.Tech](https://blognow.tech)
2. Sign up or log in to your account
3. Navigate to your [Dashboard](https://blognow.tech/dashboard)
4. Copy your API key

### 2. Deploy to Vercel

Click the deploy button above and follow the prompts:

1. Connect your GitHub account
2. Enter your `NEXT_PUBLIC_BLOGNOW_API_KEY`
3. Deploy!

### 3. Local Development

Clone the repository and install dependencies:

```bash
git clone https://github.com/synkc0/nextjs-blog-now-starter-kit.git
cd nextjs-blog-now-starter-kit
npm install
```

Create a `.env.local` file in the root directory:

```bash
NEXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here
NEXT_PUBLIC_BLOGNOW_BASE_URL=https://api.blognow.tech
```

Run the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see your blog.

## 📁 Project Structure

```
├── src/
│   ├── app/
│   │   ├── blog/
│   │   │   ├── [slug]/
│   │   │   │   └── page.tsx           # Individual blog post (SSG)
│   │   │   └── page.tsx               # Blog listing (Server-side pagination)
│   │   ├── layout.tsx                 # Root layout with header
│   │   ├── page.tsx                   # Home page
│   │   ├── sitemap.ts                 # Dynamic sitemap generation
│   │   └── robots.ts                  # SEO robots configuration
│   ├── components/
│   │   ├── BlogCard.tsx               # Blog post preview card
│   │   ├── BlogList.tsx               # Client-side paginated list
│   │   ├── BlogListWithPagination.tsx # Server-side paginated list
│   │   ├── Header.tsx                 # Navigation header
│   │   ├── Pagination.tsx             # Client-side pagination UI
│   │   ├── SearchBar.tsx              # Real-time search input
│   │   ├── ServerPagination.tsx       # Server-side pagination UI
│   │   ├── ShareButton.tsx            # Social sharing functionality
│   │   └── ThemeToggle.tsx            # Dark mode toggle button
│   ├── lib/
│   │   ├── blognow.ts                 # BlogNow singleton client
│   │   └── cache.ts                   # SSG cache with async generator
│   └── store/
│       └── blogStore.ts               # Zustand store with page caching
├── .env.example
├── .env.local
└── next.config.ts
```

## 🎨 Customization

### Styling

This template uses Tailwind CSS. Customize colors, fonts, and styles in:

- `tailwind.config.ts` - Tailwind configuration
- `src/app/globals.css` - Global styles
- Component files - Individual component styles

### Content

Blog content is managed through [BlogNow.Tech](https://blognow.tech). Use their dashboard to:

- Create and edit blog posts
- Manage tags and categories
- Upload images
- Schedule posts

### Components

Modify or extend components in `src/components/`:

- **BlogCard** - Blog post preview cards with images and metadata
- **BlogList** - Client-side paginated grid (used on homepage)
- **BlogListWithPagination** - Server-side paginated list (used on /blog)
- **SearchBar** - Real-time search with instant filtering
- **ServerPagination** - URL-based pagination controls
- **ThemeToggle** - Dark/light mode switcher
- **Header** - Navigation bar with theme toggle
- **ShareButton** - Social sharing (Twitter, Facebook, LinkedIn)

## 🔧 Configuration

### Environment Variables

| Variable                       | Description          | Required                               |
| ------------------------------ | -------------------- | -------------------------------------- |
| `NEXT_PUBLIC_BLOGNOW_API_KEY`  | Your BlogNow API key | Yes                                    |
| `NEXT_PUBLIC_BLOGNOW_BASE_URL` | BlogNow API base URL | No (default: https://api.blognow.tech) |

### Next.js Configuration

The template includes optimized Next.js configuration for BlogNow images in `next.config.ts`:

```typescript
images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "cdn.blognow.tech",
      pathname: "/**",
    },
  ],
}
```

### Rendering Strategy

The template uses a hybrid rendering approach:

**Blog Listing Page (`/blog`)**

- Server-side pagination with on-demand data fetching
- Zustand store with intelligent page caching
- URL-based navigation (`/blog?page=2`)
- Real-time client-side search filtering
- ISR revalidation every 5 minutes

**Blog Post Pages (`/blog/[slug]`)**

- Static Site Generation (SSG) for optimal performance
- Pre-rendered at build time using cached data
- ISR revalidation every 5 minutes

Adjust revalidation timing in page files:

```typescript
export const revalidate = 300; // seconds
```

### State Management

Zustand store (`src/store/blogStore.ts`) features:

- **Page Caching**: Visited pages are cached to prevent refetching
- **Search Filtering**: Client-side search across current page posts
- **Server Pagination**: Fetches data on-demand per page
- **Loading States**: Built-in loading and error handling

## 🏗️ Architecture Highlights

### Pagination Strategy

- **/blog page**: Server-side pagination with Zustand state management
- **Homepage**: Client-side pagination with all posts loaded
- **Caching**: Pages are cached in Zustand Map to avoid duplicate API calls
- **URL State**: Page number persists in URL query parameters

### Search Implementation

- **Real-time filtering**: Instant search results as you type
- **Scope**: Searches title and excerpt of currently loaded posts
- **UI State**: Hides pagination when search is active
- **Result count**: Displays number of matching posts

### Dark Mode

- **Toggle**: Manual theme switcher in header
- **Persistence**: Theme saved to localStorage
- **Implementation**: Custom Tailwind variant `@variant dark (&:is(.dark *))`
- **Scope**: Applied across all components

## 📚 Learn More

- [BlogNow Documentation](https://blognow.tech/docs)
- [BlogNow SDK](https://www.npmjs.com/package/@blognow/sdk)
- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS v4](https://tailwindcss.com/docs)
- [Zustand Documentation](https://zustand.docs.pmnd.rs)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

MIT License - feel free to use this template for your projects!

## 🙏 Acknowledgments

- Built with [Next.js](https://nextjs.org)
- Powered by [BlogNow.Tech](https://blognow.tech)
- Styled with [Tailwind CSS](https://tailwindcss.com)
- Icons by [Lucide](https://lucide.dev)

---

**Need Help?** Check out the [BlogNow Documentation](https://blognow.tech/docs) or join our community!