A modern, feature-rich boilerplate for building scalable web applications with Next.js.
- Next.js 14 with App Router
- TypeScript for type safety
- Tailwind CSS for utility-first styling
- NextUI for beautiful, accessible UI components
- NextAuth.js for authentication
- Framer Motion for smooth animations
- Tabler Icons for a comprehensive icon set
- ESLint and Prettier for code quality
- Drizzle for data persistence
- Clone the repository:
git clone https://github.com/rafaelfagundes/next-boilerplate.git
cd next-boilerplate- Install the dependencies:
npm install-
Set up the environment variables
-
Generate the NextAuth Secret:
openssl rand -base64 32- Start the development server:
npm run devOpen http://localhost:3000 in your browser to see the result.
src/ ├── app/ # App Router pages and layouts ├── components/ # Reusable UI components ├── lib/ # Utility functions and shared logic ├── styles/ # Global styles and Tailwind config └── types/ # TypeScript type definitions
- npm run dev: Start the development server
- npm run build: Build the production application
- npm start: Start the production server
- npm run lint: Run ESLint
- npm run format: Format code with Prettier
- npm run db:migrate: Run database migrations
- npm run db:push: Push database migrations to the database
- npm run db:studio: Open the database migration studio
This project includes recommended VS Code extensions for an optimal development experience. To install them:
- Open the Extensions view in VS Code (Ctrl+Shift+X)
- Search for "@recommended" in the extensions search bar
- Install the workspace recommended extensions
To learn more about the technologies used in this boilerplate, check out the following resources:
- Next.js Documentation - Learn about Next.js features and API.
- TypeScript Documentation - Explore TypeScript language features and best practices.
- Tailwind CSS Documentation - Discover utility-first CSS framework capabilities.
- NextUI Documentation - Understand how to use NextUI components effectively.
- NextAuth.js Documentation - Learn about authentication in Next.js applications.
- Framer Motion Documentation - Explore animation capabilities for React applications.
- Tabler Icons Documentation - Explore a comprehensive icon set for your projects.
- Drizzle Documentation - Learn how to use Drizzle for data persistence.
- ESLint Configuration - Understand how to configure ESLint for your project.
- ESLint Documentation - Learn about identifying and fixing problems in your JavaScript code.
- Prettier Documentation - Understand how to configure and use Prettier for code formatting.
- Bulletproof React - Explore architecture and project structure best practices for React applications.