IndieShow-Starter-Nextjs

IndieShow: 🚀 A Next.js 15 + Tailwind CSS 4 + TypeScript Product Showcase Template for Indie Developers

Focused on development experience: 🖥️ Next.js 15 + 🛠️ TypeScript + 🎨 Tailwind CSS 4 + 🌐 next-intl + 📄 React Markdown + 🔍 ESLint + 📊 Multiple Analytics Tools + ☁️ Vercel. Quickly launch your global AI SaaS application with this elegant, high-performance, and SEO-friendly framework.

💡 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

Test Item	Score	Baseline
Google PageSpeed (Mobile)	94	> 90
Google PageSpeed (Desktop)	100	> 90

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
Icon 8000 s: 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:

Google Analytics
- Configured via the NEXT_PUBLIC_GOOGLE_ANALYTICS_ID environment variable
Baidu Analytics
- Configured via the NEXT_PUBLIC_BAIDU_ANALYTICS_ID environment variable
OpenPanel
- Configured via the NEXT_PUBLIC_OPENPANEL_CLIENT_ID environment variable
Plausible
- Configured via the NEXT_PUBLIC_PLAUSIBLE_DOMAIN environment variable
Umami
- Configured via the NEXT_PUBLIC_UMAMI_WEBSITE_ID environment variable

🚀 Quick Start

Requirements

Node.js ≥ 18.0
pnpm ≥ 8.0

Development Process

Clone the project

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

Configure environment variables

cp .env.example .env.local

Start the development server

pnpm dev

Build and deploy

# Production build
pnpm build

# Start production server
pnpm start

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

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.github/workflows		.github/workflows
.vscode		.vscode
public		public
src		src
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README-zh.md		README-zh.md
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

IndieShow-Starter-Nextjs

IndieShow: 🚀 A Next.js 15 + Tailwind CSS 4 + TypeScript Product Showcase Template for Indie Developers

💡 Project Overview

🎯 Use Cases

⚡ Performance

🎨 Theme Preview

🌈 Live Demo

🚀 Tech Stack

📦 Project Structure

✨ Core Features

🚀 Development Experience

🎨 UI Design

🌍 Internationalization

📱 Multi-platform Adaptation

🔍 SEO Optimization

⚡️ Performance Optimization

🔧 Theme Customization

Direct editing of theme.css

🧩 Component Architecture

📊 Analytics Tools Integration

🚀 Quick Start

Requirements

Development Process

📄 License

🙏 Acknowledgements

📮 Contact

About

Uh oh!

Releases

Packages

Uh oh!

Uh oh!

Languages

License

WaveAny/IndieShow-Starter-Nextjs

Folders and files

Latest commit

History

Repository files navigation

IndieShow-Starter-Nextjs

IndieShow: 🚀 A Next.js 15 + Tailwind CSS 4 + TypeScript Product Showcase Template for Indie Developers

💡 Project Overview

🎯 Use Cases

⚡ Performance

🎨 Theme Preview

🌈 Live Demo

🚀 Tech Stack

📦 Project Structure

✨ Core Features

🚀 Development Experience

🎨 UI Design

🌍 Internationalization

📱 Multi-platform Adaptation

🔍 SEO Optimization

⚡️ Performance Optimization

🔧 Theme Customization

Direct editing of theme.css

🧩 Component Architecture

📊 Analytics Tools Integration

🚀 Quick Start

Requirements

Development Process

📄 License

🙏 Acknowledgements

📮 Contact

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Languages

Packages