A production-ready Next.js boilerplate with built-in SEO optimization, content management system, and modern development practices. Created by Valiance Media LLC to accelerate the development of professional marketing websites and web applications.
- Visual SEO Dashboard: Complete SEO health monitoring with actionable insights
- Multi-Sitemap Architecture: Automatic generation of separate sitemaps for pages, blog posts, and categories
- Schema Markup Generator: Visual interface for 13+ schema types (Article, Product, FAQ, HowTo, Event, etc.)
- Social Media Previews: Live preview of content on Twitter, Facebook, and LinkedIn
- Redirect Management: Intelligent redirect system with chain and circular redirect prevention
- Robots.txt Editor: GUI editor with validation and best practices
- Meta Tag Automation: Automatic generation of optimal meta tags for all pages
- Search Console Integration: Direct integration with verification codes
- Comprehensive Admin Dashboard: Multi-tab interface with Overview, Content, and System management
- Visual Blog Editor: Rich text editor with formatting tools, image management, and SEO fields
- Local File Storage: Content saved to local files, commit via your IDE/git client
- Advanced Page Management:
- CRUD operations for static pages with individual SEO settings
- Automatic detection of static vs dynamic (client) components
- Support for nested page structures (e.g.,
/auth/login,/docs/api/reference) - Visual indicators for page types in admin panel
- Read-only SEO fields for client components
- "Rescan Pages" feature to discover newly added pages
- Category Management: Full category system with descriptions, slugs, and post counting
- Draft/Published Workflow: Complete content workflow with featured content highlighting
- Content Organization: Tags, categories, reading time, and author management
- Bulk Operations: Manage multiple posts and pages efficiently
- Multi-Provider Email Support: SMTP, SendGrid, Mailgun, Postmark, and Resend
- Analytics Integration: Google Analytics, Facebook Pixel, Hotjar, Microsoft Clarity
- Site Verification: Google, Bing, Yandex, Pinterest verification management
- Real-time Health Monitoring: System status indicators for all components
- Environment Variable Validation: Automatic checking of required configurations
- Performance Metrics: Publishing rates, content statistics, system health scores
- TypeScript: Full type safety across the application with proper interfaces
- Tailwind CSS: Utility-first CSS framework with custom blue-based theme
- Theme System: Built-in dark/light mode with CSS variables
- Component Library: 50+ reusable UI components with consistent naming
- ESLint & Prettier: Code quality and formatting enforcement
- Design System: Comprehensive typography and spacing system
- Edge-Compatible Auth: Authentication system optimized for edge runtime with security features
- API Documentation: Well-structured RESTful endpoints
- Dynamic Configuration: All branding dynamically pulls from central SEO config
- Production Build Tools: Automatic page configuration generation for deployment
- Performance Optimized: 95+ Lighthouse scores, optimized for Core Web Vitals
- Mobile-First Design: Responsive layouts with touch-friendly interfaces
- Security Features: CSRF protection, XSS prevention, secure authentication with brute-force protection and session management
- Deployment Ready: Optimized for Vercel, Netlify, and other platforms
- Legal Compliance: Privacy Policy and Terms of Service templates
- Accessibility: WCAG 2.1 AA compliant components
- Node.js 18+
- npm or yarn or pnpm
- Git (for version control)
- Clone the repository:
git clone https://github.com/valiance-media/nextjs-starter.git my-project
cd my-project- Install dependencies:
npm install
# Note: You may see deprecation warnings from ESLint v8 dependencies.
# These are expected as Next.js 15 still uses ESLint v8.
# The warnings don't affect functionality.- Set up authentication (Required for Admin Access):
# Run the auth setup script
npm run setup-auth
# Or manually create .env.local with:
ADMIN_USERNAME=your-admin-username
ADMIN_PASSWORD_HASH=your-hashed-password
SESSION_SECRET=your-session-secret- Configure environment variables:
# Create .env.local file
cp .env.example .env.local
# Edit .env.local with your values
NEXT_PUBLIC_SITE_URL=http://localhost:3000- Update the SEO configuration:
- Edit
src/lib/seo/config.tswith your company information - Update site URL, social media links, and verification codes
- All branding throughout the app automatically uses this configuration
- Generate favicon assets:
- Go to favicon.io/favicon-converter/
- Upload your logo (512x512px or larger recommended)
- Download and extract files to
public/favicon/
- Run the development server:
npm run devOpen http://localhost:3000 to see your site. Access the admin dashboard at http://localhost:3000/admin
- Navigate to
/admin/login - Use the credentials you set up in
.env.local - Access the comprehensive dashboard at
/admin - Note: The system includes automatic account lockout after failed login attempts and session timeout for security
- Quick Actions: Create new posts/pages, manage categories, access SEO settings
- Statistics Cards: Total posts, published, drafts, pages count
- Recent Posts: Quick access with inline editing capabilities
- System Status: Real-time monitoring of storage, Analytics, SEO configuration
- Categories Overview: Visual breakdown with post counts
- Performance Metrics: Publishing rates and content health scores
- Blog Management: Create, edit, delete posts with rich text editor
- Page Management: Static page CRUD operations with SEO settings
- Category Management: Organize content with hierarchical categories
- Redirect Management: Create and manage URL redirects with chain prevention
- Configuration Center: Access all system settings from one place
- Integration Management: Analytics configuration
- Site Files: Quick access to sitemap.xml and robots.txt
- Settings Page: Comprehensive configuration interface
- Rich Text Editing: Headings, formatting, lists, links, images, code blocks
- SEO Optimization: Meta title, description, keywords, schema markup
- Media Management: Upload and manage images locally
- Draft System: Save drafts and publish when ready
- Featured Content: Highlight important posts
- Categories & Tags: Organize content effectively
- Author Attribution: Track content creators
- Reading Time: Automatic calculation
Access the comprehensive SEO management interface with multiple tabs:
- Visual Config Editor: Modify seo.config.ts through GUI
- Social Media Settings: Configure Open Graph and Twitter Cards
- Analytics Setup: Integrate tracking codes
- Verification Codes: Manage search engine verifications
- Smart Redirect Management: Create, edit, delete redirects
- Chain Prevention: Automatic detection and prevention of redirect chains
- Circular Detection: Prevents A→B→A redirect loops
- Bulk Updates: Update multiple redirects when chains are detected
- Schema Generator: Visual interface for creating structured data
- 13+ Schema Types: Article, Product, FAQ, HowTo, Event, Service, etc.
- Auto-population: Schemas populate with page data automatically
- Validation Tools: Direct links to Google Rich Results Test
- Export JSON-LD: Copy generated schemas for external use
- Meta Tag Analysis: Check all pages for proper meta tags
- Sitemap Status: Monitor sitemap generation and content
- Schema Coverage: Track which pages have structured data
- Performance Metrics: SEO-related performance indicators
The boilerplate includes advanced schema markup support:
Supported Schema Types:
- Organization / LocalBusiness / Person
- Article / BlogPosting / NewsArticle
- Product / Service / Review
- FAQ / HowTo / Recipe
- Event / Course / JobPosting
- Video / SoftwareApplication
- Website / BreadcrumbList
Features:
- Visual schema editor in blog/page editors
- Automatic schema generation based on content
- Multiple schemas per page support
- Schema validation and testing tools
# Required
NEXT_PUBLIC_SITE_URL=https://yoursite.com
# Admin Authentication (Required for Admin Access)
ADMIN_USERNAME=admin
ADMIN_PASSWORD_HASH=hashed-password-here
ADMIN_TOKEN=your-session-token
# Analytics (Optional)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
NEXT_PUBLIC_FB_PIXEL_ID=XXXXXXXXXX
NEXT_PUBLIC_HOTJAR_ID=XXXXXXXXXX
NEXT_PUBLIC_CLARITY_ID=XXXXXXXXXX
# Site Verification (Optional)
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=XXXXXXXXXX
NEXT_PUBLIC_BING_SITE_VERIFICATION=XXXXXXXXXX
NEXT_PUBLIC_YANDEX_SITE_VERIFICATION=XXXXXXXXXX
NEXT_PUBLIC_PINTEREST_SITE_VERIFICATION=XXXXXXXXXX
# Development Options
DISABLE_ADMIN_AUTH=true # Disable auth in development (never use in production)All SEO settings are centralized in src/lib/seo/config.ts:
export const seoConfig = {
siteName: 'Your Company',
siteUrl: 'https://yoursite.com',
defaultTitle: 'Your Default Title',
defaultDescription: 'Your default description',
defaultKeywords: ['keyword1', 'keyword2'],
// Social Media
social: {
twitter: '@yourhandle',
facebook: 'yourpage',
instagram: 'yourprofile',
linkedin: 'company/yourcompany'
},
// Organization Schema
organization: {
name: 'Your Company',
logo: '/logos/logo.png',
contactEmail: 'contact@yoursite.com'
}
};- Edit
src/styles/themes.tsfor color schemes - Modify
tailwind.config.jsfor design tokens - Update CSS variables in
src/styles/globals.css - Customize typography system for brand consistency
├── public/
│ ├── favicon/ # Favicon assets
│ ├── images/ # Static images
│ ├── logos/ # Company logos
│ └── blog-content/ # Blog post content (JSON files)
│ └── images/ # Blog post images
├── src/
│ ├── app/ # Next.js app router pages
│ │ ├── admin/ # Admin CMS pages
│ │ │ ├── page.tsx # Enhanced admin dashboard
│ │ │ ├── blog/ # Blog management
│ │ │ ├── pages/ # Page management
│ │ │ ├── seo/ # SEO dashboard
│ │ │ ├── settings/ # System settings
│ │ │ └── categories/ # Category management
│ │ ├── api/ # API routes
│ │ │ └── admin/ # Admin API endpoints
│ │ ├── blog/ # Public blog pages
│ │ └── (pages)/ # Static pages
│ ├── components/ # Reusable components
│ │ ├── admin/ # Admin-specific components
│ │ │ ├── seo/ # SEO management components
│ │ │ └── blog/ # Blog editor components
│ │ └── ui/ # UI components
│ ├── seo/ # SEO utilities
│ ├── lib/ # Utility functions
│ │ ├── auth.ts # Authentication
│ │ └── redirects.ts # Redirect management
│ └── proxy.ts # Route proxy (auth, redirects, sitemap)
├── scripts/
│ └── generate-pages-config.js # Scans and catalogs all pages
- Push your code to GitHub
- Import your repository on Vercel
- Add all environment variables in Vercel dashboard
- Deploy (build scripts automatically run to catalog pages)
This boilerplate uses a local file-based content management approach:
- Content is stored in
public/blog-content/as JSON files - Make changes locally via the admin panel
- Commit and push changes via your IDE or git client
- Redeploy to see changes in production
This approach provides:
- Full version control for all content
- No database required
- Simple deployment workflow
- Works with any static hosting platform
GET /api/blog- List all published blog postsGET /api/blog/[slug]- Get single blog postGET /sitemap.xml- Dynamic sitemapGET /robots.txt- Robots file
POST /api/admin/login- Admin loginDELETE /api/admin/login- Admin logoutGET /api/admin/dashboard- Dashboard statisticsPOST /api/admin/blog- Create blog postPUT /api/admin/blog- Update blog postDELETE /api/admin/blog- Delete blog postGET /api/admin/pages- List pagesPOST /api/admin/pages- Create pageGET /api/admin/seo- SEO configurationPUT /api/admin/seo- Update SEO settingsPOST /api/admin/redirects- Manage redirects
This boilerplate is optimized for:
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for LCP, FID, and CLS
- SEO Score: 100/100 on most SEO analyzers
- Accessibility: WCAG 2.1 AA compliant
- Page Speed: Sub-second load times with proper caching
- Next.js 15 - React framework with App Router
- TypeScript - Type safety
- Tailwind CSS - Utility-first CSS
- React 19 - UI library
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
Valiance Media LLC creates innovative in-house software solutions and e-commerce brands. We build digital products that drive growth and deliver exceptional user experiences.
- Website: valiancemedia.com
- Email: contact@valiancemedia.com
Made with ❤️ by Valiance Media LLC
Building digital excellence, one project at a time.