A feature-rich starter template combining Next.js 15 (with Turbopack) for the frontend and Sanity v3 for the backend CMS. Designed for rapid development with pre-built components and internationalization support.
This template utilizes components inspired by TWBlocks (built with Shadcn/ui and Tailwind CSS) for a modern and customizable UI.
- Comprehensive Page Builder: Create complex pages with 12+ pre-built section types
- Powerful Component Library: Feature-rich, responsive components for all common UI patterns
- Fully Typed Schema: Complete TypeScript definitions for all Sanity schema types
- Internationalization Ready: Built-in support for multiple languages with sanity-plugin-document-internationalization
- Modern UI Framework: Built with Shadcn/ui components and Tailwind CSS
- Analytics Built-in: Integrated Google Analytics and PostHog for comprehensive user tracking
- Optimized Performance: Next.js App Router and Turbopack for fast development and production builds
- SEO Optimized: Structured metadata, OpenGraph support, and more
The kit includes the following section types for building pages:
- Hero Sections: Multiple variants including Button Banner, Badge Banner, and Grid Gallery
- Feature Sections: 9 layout variants (Default, With Image, Left/Right Image, Image Cards, etc.)
- Blog Sections: Display your blog posts with multiple layout options
- Stats Sections: Display key metrics and statistics with trend indicators
- Testimonials: Showcase customer testimonials with various display options
- Pricing Sections: Create pricing plans with feature comparisons
- CTA (Call-to-Action): Engage users with prominent action buttons
- FAQ Sections: Organized question and answer sections
- Cases/Logos: Display client logos or case studies
- Compare Features: Create detailed feature comparison tables
- Contact Sections: Forms with customizable fields and validation
- Newsletter Sections: Email signup forms with multiple variants
- Frontend:
- Next.js 15 (App Router & Turbopack)
- React 18
- TypeScript
- Tailwind CSS
- Shadcn/ui Components
- TWBlocks Component Designs
- next-sanity for Sanity integration
- PostHog for product analytics
- Google Analytics for website traffic insights
- Internationalization Ready (Client & Server Components)
- Studio (CMS):
- Sanity v3
- TypeScript
- sanity-plugin-document-internationalization for multi-language content
- Styled Components
├── frontend/ # Next.js 15 frontend application
├── studio/ # Sanity Studio v3
└── package.json # Root workspace configuration
Clone the template repository to your local machine:
git clone https://github.com/vncsleal/sane-kit.git
cd sane-kitInstall dependencies for the entire monorepo from the root directory:
npm installCreate an .env.local file in the frontend directory (frontend/.env.local) with the following variables:
NEXT_PUBLIC_SANITY_PROJECT_ID="YOUR_PROJECT_ID"
NEXT_PUBLIC_SANITY_DATASET="production" # or your dataset name
# Optional: Add a read token for drafts if needed for preview
# SANITY_API_READ_TOKEN="YOUR_READ_TOKEN"
# Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX" # Your Google Analytics measurement ID
NEXT_PUBLIC_POSTHOG_KEY="phc_XXXXXXXXXXXX" # Your PostHog project API key
NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com" # Or your self-hosted PostHog instance URLReplace the placeholder values with your actual project IDs and API keys. You can find your Sanity project ID in your Sanity project settings or by running sanity manage in the studio directory.
Start both the Next.js frontend and the Sanity Studio development servers concurrently from the root directory:
npm run dev- Your Next.js app will be running at http://localhost:3000
- Your Sanity Studio will be running at http://localhost:3333 (or the port specified in the root
package.json)
Log in to the Studio using your Sanity account.
- Create new pages in the Sanity Studio by adding new Page documents
- Use the Page Builder field to construct your page with various section components
- Each section type offers multiple variants and customization options
- Create reusable components like Headers and Footers that can be shared across pages
The kit comes with built-in support for multiple languages:
- Default language is English with Brazilian Portuguese as a secondary language
- Add more languages by modifying the language configuration in
sanity.config.ts - Each document type can have language-specific versions with automatic relationship management
- Translation workflows are built into the Studio interface for easy content management
To deploy your Sanity Studio:
- Make sure you're logged in to your Sanity account:
cd studio npx sanity login - Deploy the studio from the root directory:
npm run deploy:studio
- Push your code to a Git provider (e.g., GitHub).
- Create a new Vercel project and connect it to your Git repository.
- Important: Set the Root Directory in Vercel project settings to
frontend. - Add the environment variables from
frontend/.env.localto your Vercel project settings (NEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASET, andSANITY_API_READ_TOKENif used). - Deploy!
Remember to add your deployed frontend URL (e.g., https://your-app.vercel.app) to your Sanity project's CORS origins settings in the Sanity management console (sanity.io/manage).
Located in frontend/.env.example:
NEXT_PUBLIC_SANITY_PROJECT_ID: Your Sanity project ID.NEXT_PUBLIC_SANITY_DATASET: Your Sanity dataset name (e.g.,production).SANITY_API_READ_TOKEN(Optional): Your Sanity API read token, required for fetching draft content if you implement preview functionality.NEXT_PUBLIC_GA_MEASUREMENT_ID: Your Google Analytics measurement ID.NEXT_PUBLIC_POSTHOG_KEY: Your PostHog project API key.NEXT_PUBLIC_POSTHOG_HOST: The URL of your PostHog instance (default is https://app.posthog.com).
Sane-Kit comes with both Google Analytics and PostHog implementations:
- Page view tracking across your site
- Event tracking capabilities
- Configured for privacy compliance
- Compatible with Google Analytics 4 (GA4)
- Open source analytics platform
- Feature flags and A/B testing capabilities
- Session recordings and heatmaps
- User identification and custom properties tracking
- Self-hostable for complete data ownership
To disable either analytics platform, simply remove the corresponding environment variables or set them to empty strings.
- Main branch: Current version with document-based internationalization (v2.0+)
- Legacy branch: Previous version with array-based internationalization (v1.x)
To use the legacy version:
git checkout legacyThis project has migrated from array-based to document-based internationalization. If you're upgrading from v1.x:
- Content Migration Required: Existing multilingual content needs to be restructured
- Schema Changes: Document types now use document-level language handling
- Query Updates: GROQ queries have been updated for better performance
- Plugin Change: Now uses
sanity-plugin-document-internationalizationinstead ofsanity-plugin-internationalized-array
- Backup your data before starting the migration
- Update schema types to use the new document-based structure
- Migrate existing content using Sanity's migration tools
- Update GROQ queries to work with the new structure
- Test thoroughly in a development environment
For detailed migration instructions, please refer to the Sanity Document Internationalization documentation.
If you encounter issues during migration, please:
- Check the legacy branch for reference
- Review the migration documentation
- Open an issue on GitHub for additional support
Contributions are welcome! Please refer to the contributing guidelines (if available) or open an issue/pull request.
This project is licensed under the LICENSE file.