https://github.com/experience-monks/nextjs-boilerplate
Jam3 NextJS Generator for SPA, SSG, SSR and JAMStack applications
https://github.com/experience-monks/nextjs-boilerplate
backend boilerplate frontend generator nextjs nyg react ssr static
Last synced: about 1 month ago
JSON representation
Jam3 NextJS Generator for SPA, SSG, SSR and JAMStack applications
- Host: GitHub
- URL: https://github.com/experience-monks/nextjs-boilerplate
- Owner: Experience-Monks
- License: mit
- Created: 2020-01-30T22:16:08.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T20:35:22.000Z (8 months ago)
- Last Synced: 2025-03-30T09:01:57.596Z (3 months ago)
- Topics: backend, boilerplate, frontend, generator, nextjs, nyg, react, ssr, static
- Language: TypeScript
- Homepage: https://generator.jam3.net/
- Size: 29.8 MB
- Stars: 110
- Watchers: 31
- Forks: 18
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Welcome to Monks NextJS Generator! 🚀
Hey there, developer! Ready to dive into our awesome NextJS Boilerplate? This guide will help you set up and start developing in no time. Let's get started!
## Table of Contents
- [Setting Up](#setting-up)
- [Development](#development)
- [Documentation](#documentation)
- [License](#license)
## Setting Up
### 1. Check Your Node and NPM Versions
First things first, let's make sure you're using the right versions:
- Node: 18.19.0
- NPM: 10.2.3
Pro tip: Use NVM to manage your Node versions easily!
```bash
nvm install 18.19.0
nvm use 18.19.0
```
### 2. Install git-lfs
We use Git LFS for managing large files. Here's how to set it up:
- **For Ubuntu/Debian fans:**
```bash
curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs
```
- **Mac users (with Homebrew):**
```bash
brew update
brew install git-lfs
```
- **Windows users:** Grab the installer from [Git LFS Releases](https://github.com/git-lfs/git-lfs/releases)
### 3. Set Up Your GSAP Token
To install our npm packages, you'll need a GSAP token. Ask your project lead for this key!
- **For Mac/Linux:**
Add to your shell profile (e.g., `~/.bash_profile`, `~/.zshrc`):
```bash
export GSAP_NPM_TOKEN=
```
- **For Windows:**
Choose your favorite method:
1. Command Prompt:
```
setx GSAP_NPM_TOKEN ""
```
2. PowerShell:
```powershell
[Environment]::SetEnvironmentVariable("GSAP_NPM_TOKEN", "", [System.EnvironmentVariableTarget]::User)
```
3. GUI: Search for "Environment Variables" in the Start menu and add it there.
Remember to restart your terminal after setting this up!
### 4. Set Up Your Linters
For a smooth coding experience, set up these linters in VSCode:
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
Update your VSCode settings (JSON) with our recommended configuration:
1. Press `Cmd + Shift + P` (on Mac) or `Ctrl + Shift + P` (on Windows/Linux)
2. Type "Open Settings (JSON)" and select it
3. Add or update the following settings:
```json
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"stylelint.validate": ["css", "scss"]
}
```
These settings ensure that:
- Prettier formats your code on save
- ESLint fixes issues automatically
- Stylelint validates your CSS and SCSS files
With these linters set up, you'll catch and fix issues early, keeping your code clean and consistent!
### 5. Clone the Repo
```bash
git clone [email protected]:Experience-Monks/nextjs-boilerplate.git
```
### 6. Install Dependencies
```bash
npm install
```
## Development
Ready to code? Start your local server:
```bash
npm run dev
```
This will fire up:
- Frontend (https): https://localhost:3000
- Storybook: http://localhost:9001
## Documentation
Want to dive deeper? Check out our docs:
- [File Structure And Organization](./docs/file-structure-and-organization.md)
- [Template Generator](./docs/template-generator.md)
- [Copy Management](./docs/copy-management.md)
- [Import Aliases](./docs/import-aliases.md)
## License
We're open source! Check out our [MIT License](LICENSE).
Happy coding! 🎉👩💻👨💻