https://github.com/shin-sforzando/next-boilerplate
Template repository for Next.js
https://github.com/shin-sforzando/next-boilerplate
nextjs
Last synced: about 1 month ago
JSON representation
Template repository for Next.js
- Host: GitHub
- URL: https://github.com/shin-sforzando/next-boilerplate
- Owner: shin-sforzando
- License: mit
- Created: 2023-01-07T07:18:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T18:19:26.000Z (6 months ago)
- Last Synced: 2025-02-03T06:35:35.438Z (3 months ago)
- Topics: nextjs
- Language: TypeScript
- Homepage: https://next-boilerplate-pi.vercel.app
- Size: 3.75 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# next-boilerplate
[](https://github.com/shin-sforzando/next-boilerplate/graphs/commit-activity)
[](https://github.com/shin-sforzando/next-boilerplate/actions/workflows/ci.yml)
[](http://commitizen.github.io/cz-cli/)
[](https://opensource.org/licenses/MIT)
|  |  |
| :------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |
| Screenshot 1 | Screenshot 2 |
**next-boilerplate** is a template repository for Next.js.
## _Use this template_
- [ ] Replace the string `shin-sforzando` with the actual project owner
- [ ] Replace the string `next-boilerplate` with the actual project name
- [ ] Create an issue `#1` for screenshots
- [ ] `npm install` to install dependencies
- [ ] Check the [repository secrets](https://github.com/shin-sforzando/next-boilerplate/settings/secrets/actions)
- [ ] Set `CHROMATIC_PROJECT_TOKEN` for Chromatic
- [ ] Integrate with Slack: `/github subscribe shin-sforzando/next-boilerplate reviews comments branches commits:*`
- [ ] **Delete this section!**
- [_Use this template_](#use-this-template)
- [Prerequisites](#prerequisites)
- [How to](#how-to)
- [Prepare for Development](#prepare-for-development)
- [Update Dependencies](#update-dependencies)
- [Secret Files](#secret-files)
- [Code](#code)
- [Logging w/ Axiom](#logging-w-axiom)
- [Client Components](#client-components)
- [Server Components](#server-components)
- [Lint](#lint)
- [Format](#format)
- [Launch Dev Server](#launch-dev-server)
- [Launch Storybook](#launch-storybook)
- [Publish to Chromatic](#publish-to-chromatic)
- [Test](#test)
- [Unit \& Integration Tests w/ Vitest](#unit--integration-tests-w-vitest)
- [E2E Tests w/ Storybook](#e2e-tests-w-storybook)
- [Documentation](#documentation)
- [Build](#build)
- [Deploy](#deploy)
- [Documenting](#documenting)
- [CHANGELOG](#changelog)
- [Misc](#misc)
- [CodeRabbit](#coderabbit)
- [Notes](#notes)
- [LICENSE](#license)
- [Contributors](#contributors)
## Prerequisites
- [Volta](https://volta.sh) as _JS Tool Manager_
- [Node.js](https://nodejs.org/) (Version 23 or higher)
- [Next.js](https://nextjs.org/) (Version 14 or higher)
- [Mantine](https://mantine.dev/) (Version 7.6 or higher)
- [Axiom](https://axiom.co/) as _Logging Service_
- [Vitest](https://vitest.dev/) as _Unit & Integration Test Framework_
- [Storybook](https://storybook.js.org/) (Version 8.3) as _UI Catalogue and Interaction Test Framework_
- [TypeDoc](https://typedoc.org/) as _TypeScript Document Generator_
- [Biome](https://biomejs.dev/) as _Script Linter and Formatter_
- [Husky](https://typicode.github.io/husky/) as _Git Hooks Manager_
- [git-secret](https://git-secret.io/) as _Secret File Manager_
- [direnv](https://direnv.net/) as _`.env` Loader_
## How to
```shell
$ npm run
Lifecycle scripts included in [email protected]:
start
next start
test
vitest --coverage
available via `npm run-script`:
prepare
husky
secret:hide
git secret hide -mvF
secret:reveal
git secret reveal -vf
reinstall
node -e 'fs.rmSync(`node_modules`, {recursive:true, force:true})' && npm install
dev
next dev
build
next build
check
run-p check:*
lint
run-p lint:*
format
run-p format:*
check:script
run-s lint:script format:script
lint:script
biome lint --apply .
format:script
biome format --write .
lint:markup
markuplint 'src/**/*.{html,tsx}'
check:style
run-s lint:style
lint:style
stylelint --fix 'src/**/*.{css,scss,less}'
lint:secret
secretlint --maskSecrets --secretlintignore .gitignore '**/*'
storybook
storybook dev -p 6006
build-storybook
storybook build
test-storybook
test-storybook --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook
chromatic
npx chromatic
doc
typedoc
```
### Prepare for Development
`npm install` to install dependencies.
#### Update Dependencies
`npx npm-check-updates` to check the latest versions of all project dependencies.
#### Secret Files
`npm run secret:hide` to hide all secret files.
`npm run secret:reveal` to reveal all secret files.
### Code
#### Logging w/ Axiom
##### Client Components
```typescript
"use client";
import { useLogger } from "next-axiom";
export default function ClientComponent() {
const log = useLogger();
log.debug("User logged in", { userId: 42 });
return
Logged in
;
}
```
##### Server Components
```typescript
import { Logger } from "next-axiom";
export default async function ServerComponent() {
const log = new Logger();
log.info("User logged in", { userId: 42 });
// ...
await log.flush();
return
Logged in
;
}
```
#### Lint
`npm run lint` to lint all.
#### Format
`npm run format` to format all.
### Launch Dev Server
`npm run dev` to launch development server on `http://0.0.0.0:3000/`.
### Launch Storybook
`npm run storybook` to launch Storybook on `http://0.0.0.0:6006/`.
#### Publish to Chromatic
Automatically deployed to [Chromatic](https://www.chromatic.com/) via GitHub Actions.
`npm run chromatic` to deploy manually.
### Test
The testing policy of this templates is to use Vitest for unit & integration tests and Storybook for E2E tests.
All implementations related to logic should be unit tested, and all implementations related to look and feel should be E2E tested.
#### Unit & Integration Tests w/ Vitest
`npm run test` to execute unit & integration test via Vitest.
See [./src/lib/utils.ts](./src/lib/utils.ts) for an example test description.
Coverage reports will be exported to `coverage`.
#### E2E Tests w/ Storybook
`npm run test-storybook` to execute interaction test via Storybook.
See [./src/stories/app/page.stories.tsx](./src/stories/app/page.stories.tsx) for an example test description.
Storybook must be activated before running the test.
Coverage reports will be exported to `coverage/storybook`.
### Documentation
`npm run doc` to generate documents based on [Doc Comments](https://typedoc.org/guides/doccomments/).
### Build
`npm run build` to create optimized production build.
### Deploy
If it is linked to [Vercel](https://vercel.com/), it will be deployed automatically with each Push.
### Documenting
#### CHANGELOG
```shell
npx git-cliff --tag $(VERSION) --output CHANGELOG.md
git add CHANGELOG.md && git commit -m "docs: :notebook: update CHANGELOG.md"
git tag $(VERSION)
git push origin --tags
```
> [!NOTE]
> `$(VERSION)` must be in accordance with [semver](https://semver.org) like `vX.Y.Z`.
## Misc
### CodeRabbit
This repository integrates with CodeRabbit, an AI code review service.
The configurations can be found in `.coderabbit.yaml`.
## Notes
This repository is [Commitizen](https://commitizen.github.io/cz-cli/) friendly, following [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow).
See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
### LICENSE
See [LICENSE](LICENSE).
### Contributors
- [sforzando LLC. and Inc.](https://sforzando.co.jp/)
- [Shin'ichiro Suzuki](https://github.com/shin-sforzando)