A clean, elegant Next.js starter project integrated with Uniform headless CMS. This project demonstrates modern web development patterns with comprehensive documentation, making it perfect for learning, prototyping, or building production websites.
- 🎨 Modern Design: Clean, responsive UI built with Tailwind CSS
- 📝 Uniform CMS: Visual editing with drag-and-drop components
- 📱 Mobile-First: Responsive design that works on all devices
- ⚡ Performance: Optimized for speed and SEO with image transformations
- 🧩 Component Library: No component library
- 📚 Content Management: Structured Article and Author content types
- 🖼️ Asset Optimization: Automatic image resizing and optimization
- 🎮 Component Playground: Interactive sandbox for testing and learning
- 🎓 Educational: Extensive code comments for learning
- 🔧 Developer Experience: TypeScript, ESLint, and modern tooling
┌─────────────────┐
│ Header │ ← Navigation & Mobile Menu
├─────────────────┤
│ │
│ Main Content │ ← Dynamic Uniform Components
│ (flexible) │
│ │
├─────────────────┤
│ Footer │ ← Always at bottom (sticky footer)
└─────────────────┘
Header- Responsive navigation with mobile menuFooter- Clean footer with links and copyrightPage- Main page layout with header/body/footer slots
Section- Versatile content section with 6 variants (hero, content, feature, testimonial, callout, minimal)Text- Simple text content componentRichText- Advanced rich text content with formattingCTA- Call-to-action buttons with styling options
Image- Responsive images with optimizationImageFeature- Image cards with icons and descriptionsImageHero- Full-screen hero with background imagesVideo- Video player with title and description
NavigationLink- Smart navigation links (desktop/mobile aware)FooterNavLink- Simple footer navigation links
- Node.js 18+
- npm
- Uniform account and project
- Clone and install dependencies:
git clone <repository-url>
cd light-starter
npm install- Set up environment variables:
cp .env.example .envAdd your Uniform credentials:
UNIFORM_API_KEY=your_api_key_here
UNIFORM_PROJECT_ID=your_project_id
UNIFORM_PREVIEW_SECRET=light-starter- Push components to Uniform:
# Push component definitions to your Uniform project
npm run uniform:push
# or
npx uniform sync push- Start development server:
npm run devOpen http://localhost:3000 to see your site.
- Access the component playground: Visit http://localhost:3000/uniform-playground to test components in a sandbox environment with responsive design tools.
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
# Uniform Sync
npm run uniform:pull # Pull latest data from Uniform
npm run uniform:push # Push local changes to Uniform
# Code Quality
npm run lint # Run ESLintsrc/
├── components/
│ ├── content/ # Content components
│ ├── layout/ # Layout components
│ ├── media/ # Image/video components
│ ├── page/ # Page layout components
│ ├── playground/ # Uniform playground
│ └── ui/ # Base UI components
├── contexts/ # React contexts
├── hooks/ # Custom React hooks
├── lib/ # Utilities and helpers
├── pages/ # Next.js pages
├── styles/ # Global styles
├── uniformContext/ # Uniform context configuration
└── utilities/ # Canvas clients and utilities
uniform-data/ # Uniform project data (components, content types, etc.)
The Section component demonstrates the power of variant-based design:
- Components are registered with Uniform for visual editing
- UniformSlots create editable areas for content authors
- UniformText and UniformRichText enable inline editing
- Asset parameters support image and video uploads
- Drag-and-drop component building
- Real-time preview in Uniform Canvas
- No-code content editing for non-technical users
- Version control and publishing workflows
The project includes structured content types for rich content management:
Article- Blog posts with title, content, tags, category, and metadataAuthor- Author profiles with bio, avatar, and social links
- TypeScript integration with Uniform types
- Component pattern support for content reuse
- Responsive design with device-specific visibility rules
- Performance optimization with automatic asset transformations
Every component includes extensive documentation:
- Purpose and use cases
- Uniform-specific features
- Responsive design patterns
- Performance considerations
- Best practices
- React Patterns: Hooks, Context, Component composition
- TypeScript: Interface definitions, type safety
- Uniform CMS: Component registration, slots, parameters, content types
- Content Architecture: Structured content with Article and Author types
- Component Modularity: Breaking complex components into focused modules
- Asset Management: Optimized image handling with transformations
- Responsive Design: Mobile-first, Tailwind CSS
- Performance: Image optimization, code splitting
- Accessibility: ARIA labels, semantic HTML, alt text
- Internationalization: Editable text labels for multi-language support
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel
# Set environment variables in Vercel dashboardThis Next.js app can be deployed to any platform supporting Node.js:
- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform
This project follows modern development practices:
- Code Style: ESLint + Prettier configuration
- TypeScript: Strict mode enabled
- Component Structure: Consistent patterns across all components
- Documentation: Comprehensive comments for educational value
- Testing: Ready for test integration
MIT License - feel free to use this project for learning, prototyping, or building your own applications.
- Uniform Documentation: https://docs.uniform.dev
- Next.js Documentation: https://nextjs.org/docs
- Tailwind CSS: https://tailwindcss.com/docs
Built with ❤️ using Next.js, Uniform, and Tailwind CSS