Modern Next.js template for Criteria projects.
- Features
- Getting Started
- Development Workflow
- Testing & Quality Assurance
- Deployment
- Project Configuration & Customization
- Resources & Community
- License
- App Router - Next.js application with App Router architecture
- TypeScript - Type-safe development with TypeScript
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - Accessible and customizable component library
- Authentication - User authentication with next-auth
- Internationalization - Multi-language support with next-intl
- Payment Integration - Payment processing with Stripe
- Dark Mode - Theme support with next-themes
- Toast Notifications - User notifications with sonner
- React Context - State management with React Context API
This repository is set up as a template that you can quickly use to start new projects.
# Using curl
curl -fsSL https://raw.githubusercontent.com/criteria/nextjs-template/main/create-criteria-app.sh | bash -s my-project
# Or clone and run
git clone https://github.com/criteria/nextjs-template.git
./nextjs-template/create-criteria-app.sh my-projectThis script:
- Creates a new project based on the template
- Runs interactive setup with customization options
- Optionally creates a GitHub repository
- Automatically pushes to the created repository
Requirements: curl, jq, git, GitHub Personal Access Token (for repo creation)
-
Click the "Use this template" button on GitHub
-
Clone your new repository
-
Run the setup script to customize your project:
pnpm setup # or npm run setup
-
Clone the repository
git clone https://github.com/criteria/nextjs-template.git my-project
-
Navigate to the project directory
cd my-project -
Run the setup script
pnpm setup # or npm run setup
-
Install dependencies
pnpm install # or make install -
Run the development server
pnpm dev # or make dev
The template includes a powerful Makefile that simplifies common development tasks:
-
View all available commands:
make help -
Development workflow:
# Install dependencies make install # Start development server make dev # Build for production make build # Start production server make start
-
Code quality:
# Run all tests make test # Check TypeScript types make test-typescript # Run markdown tests make test-markdown # Lint code make lint # Fix markdown issues make lint-md-fix
-
Maintenance:
# Check for outdated dependencies make check-deps # Run security checks make security-check # Clean build artifacts make clean
-
Deployment:
# Deploy to Vercel make deploy-vercel # Deploy to Cloudflare make deploy-cf
This project includes a Makefile to simplify common development tasks. To see all available commands:
make help-
Development:
make install- Install dependenciesmake dev- Start development servermake build- Build the projectmake start- Start production server
-
Code Quality:
make lint- Run linters (JavaScript/TypeScript)make lint-md- Run markdown lintermake lint-md-fix- Fix markdown linting issues
-
Testing:
make test- Run all testsmake test-markdown- Run markdown testsmake test-typescript- Run TypeScript type checking
-
Maintenance:
make check-deps- Check for outdated dependenciesmake security-check- Run security auditmake clean- Clean build artifacts
-
Deployment:
make deploy-vercel- Deploy to Vercelmake deploy-cf- Deploy to Cloudflare
Validate that your code follows TypeScript's type system correctly:
./tests/test-typescript.sh
# or
make test-typescriptThis project uses markdownlint-cli2 to automatically fix common markdown linting issues. When you save a markdown file or commit changes, linting rules will be automatically applied.
-
To manually lint markdown files:
pnpm lint:md # or make lint-md -
To fix markdown issues:
pnpm lint:md:fix # or make lint-md-fix
VS Code users with the markdownlint extension will see real-time linting feedback and can enable format-on-save.
Testing the markdown linting setup:
./tests/run-markdown-tests.sh
# or
make test-markdownThis verifies:
- Detection of common markdown issues
- Automatic fixing of fixable issues
- Pre-commit hook functionality
- VS Code format-on-save simulation
Check for outdated dependencies:
./tests/check-dependencies.sh
# or
make check-depsThis helps ensure your project is using the most up-to-date and secure dependency versions.
Scan your dependencies for known security vulnerabilities:
./tests/security-check.sh
# or
make security-checkThis runs an audit of your dependencies and reports any security issues found.
The easiest way to deploy your Next.js app is with Vercel:
Or via command line:
make deploy-vercel-
Customize your environment variables
cp .env.example .env.production cp wrangler.toml.example wrangler.toml
-
Edit your environment variables in
.env.productionand put all the environment variables under[vars]inwrangler.toml -
Deploy
make deploy-cf # or npm run cf:deploy
This template uses various third-party packages which may have security vulnerabilities in their dependencies. Regular security audits are recommended:
make security-checkKnown security considerations:
- Some development dependencies like
vercel,wrangler, and@cloudflare/next-on-pageshave transitive dependencies with vulnerabilities - These vulnerabilities are typical for development packages and don't affect the production build
- Run
pnpm updateregularly to keep dependencies up to date
Set up your environment variables:
cp .env.example .env.localThe template includes a comprehensive set of environment variables for:
- Authentication (NextAuth)
- Database connection (Supabase)
- Payment processing (Stripe)
- Analytics (Google Analytics, OpenPanel)
- Storage (AWS S3)
Before deploying, make sure to properly configure these variables according to your project needs.
Customize your theme in app/theme.css
Use the shadcn-ui-theme-generator to create a custom theme.
- Set your landing page content in
i18n/pages/landing - Set your i18n messages in
i18n/messages
- Criteria
- Documentation
- Template Documentation - Detailed documentation for this template
- ShipAny Documentation - Official ShipAny documentation (the base framework this template is built on)
This template is based on ShipAny's Next.js boilerplate, which we've licensed for internal use at Criteria. The ShipAny documentation provides comprehensive guidance on many features included in this template, including:
- Authentication setup
- Payment integration
- Internationalization
- Database configuration
- Deployment options
- Component customization
We recommend referencing the ShipAny documentation alongside our template-specific documentation when building your projects.