Skip to content

๐Ÿš€ Next.js 14+ full-stack Starter made with TypeScript and Tailwind CSS (authentication, modern theme, database migrations and more)

License

Notifications You must be signed in to change notification settings

antoinemcx/React-Nextjs-Boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

14 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿš€ 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.


MIT License CodeFactor Stars Support server

๐Ÿ“š 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 (dark)
Home page (light) Home page (light)
Home page (mobile) Home page (mobile)
Error page Error Page
Login page Login Page
Register 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 :

yarn <script>, npm run <script> or pnpm <script> Description
dev Launch your app on localhost:300
build Builds the application for production and regenerate the sitemap
start Serves your app for production or preview
lint Lints the project to review errors before launching

๐Ÿ’ญ 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.