/next-template-2024

A Next.js 14 template for building apps with opinionated configuration

Primary LanguageTypeScript

๐Ÿš€ Next.js Boilerplate 2024

Build Next.js Application CodeQL Docker Image CI Release

Welcome to the Next.js Boilerplate 2024 โ€“ your starting point for building modern web applications that are ready to take on tomorrow's challenges.

โšก Features & Technologies

Here's what powers the Next.js Boilerplate 2024, from the framework to the development tools:

  • Next.js - The React framework for production ๐Ÿš€
  • Tailwind CSS - A utility-first CSS framework ๐ŸŽจ
  • shadcn/ui - Reusable React components ๐Ÿ› 
  • Vitest - A blazing fast unit-test framework that runs in Vite โšก
  • Testing Library - Helps test UI components in a user-centric way ๐Ÿงช
  • Semantic Release - Fully automated version management and package publishing ๐Ÿ“ฆ
  • Renovate - Automatically keep your dependencies up to date ๐Ÿ”„
  • Commitlint - Ensures your commit messages meet the conventional commit format ๐Ÿ”
  • Docker - Simplifies deployment with containerization ๐Ÿณ
  • GitHub Actions - Automates your workflows for testing, building, and deploying ๐Ÿš€

๐ŸŒŸ Useful Links

Explore these tools to further enhance your development workflow:

  • Realtime Colors - Elevate your design with modern fonts and a dynamic color palette generator.
  • Meta Tags - Debug and generate meta tag code for any website
  • Favicon.io - Quickly generate variety of favicon sizes
  • Open Graph Generator - Generate beautiful Open Graph images with zero effort.
  • Open Graph Debugger - Preview how your Open Graph images will be rendered on social media platforms.

๐Ÿ› ๏ธ Getting Started

Step 1: ๐Ÿš€ Initial Setup

Begin by cloning the repository, navigating to the project directory, and installing dependencies. Execute the following command in your terminal:

git clone https://github.com/edwinhern/next-template-2024.git && cd next-template-2024 && npm ci

Step 2: ๐Ÿƒโ€โ™‚๏ธ Running the Project

Launch the development server to see your changes in real-time:

npm run dev

To prepare your project for production, build it with:

npm run build

Finally, run your project in production mode:

npm run start

๐Ÿค Feedback and Contributions

Your feedback and contributions are welcome! Join us in enhancing this project further to make web development more efficient and enjoyable.

๐ŸŽ‰ Happy coding!