🚀 React-Nextjs-Boilerplate

Starter Next.js (14+) template for your React projects.
If you like the project, feel free to put a ⭐ ! If you need help, join the server support.

📚 Features

What's first :

• 🚀 Production-ready with a starter file structure !
• 🌈 Modern theme using shadcn/ui and with global css variables
  • ✏️ Responsive navbar
  • 💄 Custom UI components (dropdown menus, buttons, headings, toast notifications, ...)
  • ⏳ Loading page and states for buttons
• 🌙 Dark/Light/System mode (thanks to next-themes)
• 👮 Private routing
• 🔐 Beautiful sign up and sign (with credentials or google account) in pages
• ❌ Custom error pages (404 and others)
• 📡 MySQL (or other) database integration

For a better developer experience :

• 🔥 Full-stack application with Next.js (minify, live reload, etc.)
• ⚡ TypeScript for type checking
• 💯 95+ lighthouse score
• 🎨 Integrate with Tailwind CSS (processed by PostCSS)
• ✏️ Linter with ESLint and code formatter with Prettier (default configs)
• 💡 Absolute Imports using @ prefix
• 🔑 Authentication system using Prisma and next-auth
• 🗂 VSCode settings configuration
• 🗺️ Sitemap.xml files and robots.txt with next-sitemap

📸 Screenshots

Click on each arrow to see the screenshots :

Home page (dark)

Home page (light)

Home page (mobile)

Error page

Login page

Register page

🚀 Getting Started

1. Clone the repository

git clone --depth=1 https://github.com/antoinemcx/React-Nextjs-Boilerplate.git <YOUR_PROJECT_NAME>
cd <YOUR_PROJECT_NAME>

2. Installation

Install the dependencies :

npm install
# or
yarn install
# or
pnpm install

3. Database Setup

This template uses a database for the authentication of next-auth.
Create the MySQL/MariaDB database and insert the database URL in the .env file.

After creating the database, run following command :

npx prisma migrate deploy
# or
yarn prisma migrate deploy
# or
pnpx prisma migrate deploy

4. Configuration

Rename the .env.example file in the root directory into .env.
For more information on what to put in the file, please refer to the configuration guide.

5. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Now open http://localhost:3000 with your favorite browser to see the application.

6. You liked it ? Star it :

Optional : Add a ⭐ to the repository, it helps a lot. Thanks !

📄 Documentation

• Configuration : Guide for getting the values for the .env file
• Cleaning : Files to remove to be ready to code
• Prisma migrations : How to create and manage migration files for your database using Prisma

🛠 Scripts

In development, you will mainly use yarn dev ; however, here are all the scripts available :

💭 More information

For any errors found, please contact me here or do a pull request.
This repository is licensed under the MIT License. See the LICENSE file (here) for more information.

Made with ❤️ by antoinemcx in TypeScript.