Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antoinemcx/react-nextjs-boilerplate
🚀 Next.js 14+ full-stack Starter made with TypeScript and Tailwind CSS (authentication, modern theme, database migrations and more)
https://github.com/antoinemcx/react-nextjs-boilerplate
boilerplate eslint next-auth next-sitemap next-theme nextjs prisma react starter tailwindcss typescript
Last synced: about 1 month ago
JSON representation
🚀 Next.js 14+ full-stack Starter made with TypeScript and Tailwind CSS (authentication, modern theme, database migrations and more)
- Host: GitHub
- URL: https://github.com/antoinemcx/react-nextjs-boilerplate
- Owner: antoinemcx
- License: mit
- Created: 2023-08-05T15:08:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-19T17:37:57.000Z (about 1 year ago)
- Last Synced: 2024-11-30T11:33:03.842Z (about 1 month ago)
- Topics: boilerplate, eslint, next-auth, next-sitemap, next-theme, nextjs, prisma, react, starter, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://discord.gg/G6WQsMQShZ
- Size: 567 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🚀 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](https://www.npmjs.com/package/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](https://nextjs.org/) (minify, live reload, etc.)
- ⚡ [TypeScript](https://www.typescriptlang.org/) for type checking
- 💯 **95+** lighthouse score
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com/) (processed by [PostCSS](https://postcss.org/))
- ✏️ Linter with [ESLint](https://eslint.org/) and code formatter with [Prettier](https://prettier.io/) (default configs)
- 💡 Absolute Imports using `@` prefix
- 🔑 Authentication system using [Prisma](https://www.prisma.io/) and [next-auth](https://github.com/nextauthjs/next-auth)
- 🗂 VSCode settings configuration
- 🗺️ Sitemap.xml files and robots.txt with [next-sitemap](https://www.npmjs.com/package/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
```bash
git clone --depth=1 https://github.com/antoinemcx/React-Nextjs-Boilerplate.git
cd
```
### 2. Installation
Install the dependencies :
```bash
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 :
```bash
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](/docs/CONFIGURATION.md).
### 5. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Now open [http://localhost:3000](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](/docs/CONFIGURATION.md) : Guide for getting the values for the **.env** file
- [Cleaning](/docs/CLEANING.md) : Files to remove to be ready to code
- [Prisma migrations](/docs/prisma_migrations.md) : 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 `, `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](https://en.wikipedia.org/wiki/Lint_%28software%29) the project to review errors before launching |
<br>
## 💭 More information
For any errors found, please contact me [here](https://discord.gg/G6WQsMQShZ) or do a pull request.
This repository is licensed under the MIT License. See the `LICENSE` file ([here](LICENSE)) for more information.
### Made with ❤️ by [antoinemcx](https://github.com/antoinemcx) in TypeScript.