Next-starter is an open-source starter template built on Next.js that provides a production-ready foundation for modern web applications.
It includes Tailwind CSS for styling, Next-auth for authentication, and Stripe for payment processing.
The setup also incorporates Drizzle ORM with a Neon database, Zod for schema validation, and testing tools like Jest and Playwright.
You can use this starter to build various web applications, such as SaaS platforms, e-commerce sites, or complex web portals.
The pre-installed configurations for linting, code formatting, and Git hooks help maintain code quality from the beginning of a project.
Features
๐ Next.js with App Router for modern React development
โ๏ธ React integration with latest features and performance improvements
๐ TypeScript configuration for type-safe development
๐จ Tailwind CSS 4 with class sorting, merging, and linting capabilities
๐ ๏ธ Shadcn/ui components for customizable and accessible UI elements
๐ต Stripe integration for secure payment processing
๐ Next-auth authentication with GitHub provider support
๐ก๏ธ Drizzle ORM for type-safe database operations
๐ Zod schema validation for runtime type checking
๐งช Jest and React Testing Library for unit testing
๐ญ Playwright configuration for end-to-end testing
๐ Absolute imports with path aliases using @/ prefix
๐ Prettier code formatting with consistent styling
๐งน ESLint configuration for code quality enforcement
๐ถ Husky and lint-staged for pre-commit hooks
๐น Lucide icons library integration
๐ Dark mode support with next-themes
๐ Commitlint for standardized commit messages
๐ค GitHub Actions for automated code linting on pull requests
โ๏ธ T3-env for environment variable management
๐บ๏ธ Automatic sitemap and robots.txt generation
๐ฏ Optimized for perfect Lighthouse scores
๐พ Neon database integration
Use Cases
- SaaS Applications: The combination of Next-auth for user management, Drizzle for database operations, and Stripe for subscriptions provides a strong base for building a Software-as-a-Service product.
- E-commerce Platforms: You can use the Stripe integration to manage transactions and the Shadcn/ui components to build product displays, shopping carts, and checkout pages.
- Membership Sites: Create platforms with protected content and member-only access using the built-in authentication features.
- Developer Portfolios: Build a fast, modern portfolio site that can include a blog and project showcases, all while maintaining high-quality code with the integrated tools.
Installation
1. You can get the starter template in one of three ways.
- Use the repository as a template on GitHub.
- Use
create-next-app:bash npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name - Clone the repository with git:
bash git clone https://github.com/Skolaczk/next-starter my-project-name
2. Navigate to your project directory and install dependencies.
npm install3. Create a .env file by copying the contents of .env.example. Fill in the required values for your environment.
4. To enable Git hooks for pre-commit checks, run this command.
npm run prepare5. Start the development server.
npm run dev6. You can view your application by opening http://localhost:3000 in your browser.
FAQs
Q: Can I use a different database provider instead of Neon?
A: Yes, Drizzle ORM supports multiple database providers including PostgreSQL, MySQL, and SQLite. You can modify the database configuration in the lib directory to connect to your preferred provider.
Q: How do I customize the Shadcn/ui components to match my brand?
A: Modify the CSS variables in your globals.css file to change colors, fonts, and spacing. The components use CSS custom properties that you can override to match your design system.
Q: Is the Stripe integration ready for production use?
A: The template includes Stripe configuration for both test and production environments. You’ll need to add your Stripe keys to the environment variables and configure webhooks for production deployment.
Q: Can I deploy this template to platforms other than Vercel?
A: Yes, the template works with any hosting provider that supports Node.js applications, including Netlify, Railway, and traditional VPS hosting. You need to adjust build configurations for specific platforms.
Q: How do I add additional authentication providers beyond GitHub?
A: Next-auth supports numerous providers including Google, Discord, and email authentication. Add your desired providers to the auth configuration file and include the necessary environment variables.
