🌍 English | 简体中文

💡 Project Overview

IndieShow-Starter-Nextjs is a product showcase website template designed specifically for indie developers. Built on Next.js 15 + Tailwind CSS 4 + TypeScript, you can create a professional product showcase website in minutes with simple configuration!

🎯 Use Cases

• 🏢 Product showcases for startups
• 👨‍💻 Portfolio for independent developers
• 🛠️ Quick-start template for development projects

⚡ Performance

Mobile Performance

Desktop Performance

🎨 Theme Preview

Light Theme

Dark Theme

🌈 Live Demo

• Demo Site: https://indieshow.waveany.com
• Documentation: View Docs

🚀 Tech Stack

• Framework: Next.js 15 App Router
• Internationalization: next-intl 4, with automatic language detection, supports English and Chinese switching
• Theming: next-themes, supports light/dark modes, follows system preferences by default
• Styling: Tailwind CSS 4, with container queries and custom variants
• Typing: TypeScript 5
• Component Libraries:
  • Basic components: shadcn/ui
  • Visually enhanced components: magicui
• Icons: lucide-react
• Animations: framer-motion
• Analytics Tools: Integration with Google Analytics, Baidu Analytics, OpenPanel, Plausible, and Umami

📦 Project Structure

src/
├── app/                # Next.js App Router
│   ├── [locale]/       # Internationalized routes
│   │   ├── layout.tsx  # Root layout
│   │   ├── page.tsx    # Home page
│   │   ├── (legal)/    # Legal pages route group
│   │   └── group/      # Community group page
├── components/         # Components directory
│   ├── block/          # Block components (Hero, Feature, ShowCase, CTA)
│   ├── client/         # Client components
│   ├── layout/         # Layout components (Header, Footer)
│   ├── magicui/        # Magic UI components
│   ├── markdown/       # Markdown rendering components
│   ├── providers/      # Provider components
│   └── ui/             # UI components
├── i18n/               # Internationalization
│   ├── config/         # i18n configuration
│   ├── locales/        # Language files
│   └── types/          # Type definitions
├── lib/                # Utility libraries
│   ├── analytics/      # Analytics tools
│   ├── api/            # API utilities
│   └── utils/          # Common utilities
├── styles/             # Style files
│   ├── globals.css     # Global styles
│   └── theme.css       # Theme colors
└── middleware.ts       # Middleware

✨ Core Features

🚀 Development Experience

• Using the latest dependency versions with continuous updates
• Clear distinction between server and client components based on App Router
• Complete TypeScript type support
• Consistent code style and formatting rules

🎨 UI Design

• Responsive design based on Tailwind CSS 4
• Light/dark theme switching, following system theme
• Beautiful transitions and page effects
• Customizable theme colors (OKLCH color space)

🌍 Internationalization

• Support for English and Chinese using next-intl 4.0, easily extendable
• Type-safe internationalized messages
• GDPR-compliant localization cookie handling
• Automatic language prefix in URLs (e.g., /zh)

📱 Multi-platform Adaptation

• Perfect adaptation for mobile and desktop
• Optimized interactions for different devices
• Precise responsive design using container queries at the component level

🔍 SEO Optimization

• Server-side rendering support based on Next.js 15
• Complete Meta tag support
• Customizable page titles and descriptions
• Reduced client-side JS volume using React Server Components

⚡️ Performance Optimization

• Automatic code splitting
• Image optimization (using Next.js Image component)
• Intelligent component lazy loading
• Server caching and incremental static regeneration

🔧 Theme Customization

Direct editing of theme.css

You can directly edit the src/styles/theme.css file to modify theme colors. This file uses the OKLCH color space, providing better perceptual uniformity and a wider color gamut.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.5098 0.2392 265.87);
  /* Other color variables... */
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  /* Dark theme color variables... */
}

🧩 Component Architecture

The project adopts a server component and client component separation architecture to fully leverage the performance advantages of Next.js 15:

• Server Components: All components are server components by default, reducing client-side JS volume
• Client Components: Components requiring interaction, state, or browser APIs are stored in the src/components/client/ directory
• Wrapper Pattern: Server components wrap client components, eliminating the need to be aware of differences when using them

import type { LanguageSwitcherProps } from '@/components/client/language-switcher-client'
// Server component wrapper (src/components/ui/language-switcher.tsx)
import { LanguageSwitcherClient } from '@/components/client/language-switcher-client'

export function LanguageSwitcher(props: LanguageSwitcherProps) {
  return <LanguageSwitcherClient {...props} />
}

// Client component implementation (src/components/client/language-switcher-client.tsx)
'use client'
export function LanguageSwitcherClient() {
  // Client-side state and interaction logic
}

📊 Analytics Tools Integration

The project integrates multiple popular website analytics and statistics tools to provide comprehensive user access and behavior data:

1. Google Analytics

   • Configured via the NEXT_PUBLIC_GOOGLE_ANALYTICS_ID environment variable

2. Baidu Analytics

   • Configured via the NEXT_PUBLIC_BAIDU_ANALYTICS_ID environment variable

3. OpenPanel

   • Configured via the NEXT_PUBLIC_OPENPANEL_CLIENT_ID environment variable

4. Plausible

   • Configured via the NEXT_PUBLIC_PLAUSIBLE_DOMAIN environment variable

5. Umami

   • Configured via the NEXT_PUBLIC_UMAMI_WEBSITE_ID environment variable

🚀 Quick Start

Requirements

• Node.js ≥ 18.0
• pnpm ≥ 8.0

Development Process

1. Clone the project

git clone https://github.com/WaveAny/IndieShow-Starter-Nextjs.git
cd IndieShow-Starter-Nextjs
pnpm install

2. Configure environment variables

cp .env.example .env.local

3. Start the development server

pnpm dev

4. Build and deploy

# Production build
pnpm build

# Start production server
pnpm start

5. One-click deployment

Recommended to deploy with Vercel:

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgements

• Next.js 15 - React full-stack framework
• React 19 - JavaScript UI library
• Tailwind CSS 4 - Utility-first CSS framework
• shadcn/ui - Reusable component library

📮 Contact

• GitHub Issues: Submit Issue
• Email: support@waveany.com