https://github.com/tim-richter/next-boiler
Next.js 12 boilerplate with sensible defaults and scalable code base.
https://github.com/tim-richter/next-boiler
cypress jest nextjs nextjs-starter nextjs-template radix-ui react sprinkles storybook testing-library-react typescript vanilla-extract
Last synced: 7 months ago
JSON representation
Next.js 12 boilerplate with sensible defaults and scalable code base.
- Host: GitHub
- URL: https://github.com/tim-richter/next-boiler
- Owner: tim-richter
- License: mit
- Created: 2021-09-15T06:02:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-29T09:29:05.000Z (about 3 years ago)
- Last Synced: 2025-04-08T16:53:51.478Z (10 months ago)
- Topics: cypress, jest, nextjs, nextjs-starter, nextjs-template, radix-ui, react, sprinkles, storybook, testing-library-react, typescript, vanilla-extract
- Language: TypeScript
- Homepage:
- Size: 926 KB
- Stars: 14
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Next Boiler
An opionated NextJS Boilerplate written in Typescript.
## Key Features
- Typescript
- Styling with zero runtime CSS-in-JS Solution [Vanilla-Extract](https://github.com/seek-oss/vanilla-extract)
- [Storybook](https://storybook.js.org/docs/react/get-started/introduction) for developing components in isolation
- Unit/Component Tests with [jest](https://jestjs.io/) and [testing-library](https://testing-library.com/docs/react-testing-library/intro)
- End-to-End Tests with [cypress](https://docs.cypress.io/guides/overview/why-cypress#In-a-nutshell)
- Written with best practices in mind
- Helper functions with sensible defaults for getServerSideProps/getStaticProps
- Ready to use layouts for all pages
- [plop](https://github.com/plopjs/plop) for creating pages with a uniformity.
- Accessibility with [Radix-UI](https://www.radix-ui.com/)
- i18n-ready with [next-i18next](https://github.com/isaachinman/next-i18next)
- Easy SEO with [next-seo](https://github.com/garmeeh/next-seo) on every page
- Error tracking/Performance monitoring with [sentry](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
- [Eslint](https://eslint.org/) / [Prettier](https://prettier.io/) for code styling
- [Husky](https://typicode.github.io/husky/#/) and [Lint-staged](https://github.com/okonet/lint-staged) for enforcing code style on every commit
- Fully Automatic Version Management with [semantic-release](https://github.com/semantic-release/semantic-release)
## How To Use
### Initial Setup
After cloning the project first time, run following command to install all dependencies:
```sh
pnpm i
```
### Starting Dev Server
The following commands starts the dev server on http://localhost:3000. You can
read more about the dev server in the
[documentation](https://nextjs.org/docs/api-reference/cli#development).
```sh
pnpm dev
```
### Setup Sentry
Set the environment variables as defined in .env.example. Also see [docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/).
### Plop
You can use plop to create pages and api routes in the cli. Plop makes sure every new page
conforms to predefined standards.
To run plop and get prompts for creating a new page run:
```javascript
pnpm plop
```
## Nice to Know
### Commitlint
We use commitlint to enforce commit style. If you would like to add new type enums or change the settings you can do so in the commitlint.config.js file.
### VS Code Debugging
General purpose launch settings for vs code are located in the .vscode/launch.json file. You can run these pre-defined debug sessions in your vs code debug tab.
### Project Structure
The main directories in the project are structured as following:
```
▸ .github
▸ .storybook
▸ cypress
▸ public
▾ src
▸ components
▸ config
▸ layouts
▸ pages
▸ styles
▸ types
▸ util
▸ test
```
#### .github
The project already comes with defaults for github-actions. This directory contains
the main workflow which runs all the tests of the repository and then creates a new release
with semantic-release. When it comes to deployment and vercel you might like to
use [vercel-action](https://github.com/marketplace/actions/vercel-action) to run
all these scripts before the deployment to vercel or just run all scripts
in one build command on vercel (ready to use: pnpm ci:test-build)
#### .storybook
All storybook config goes into this directory. See
[documentation](https://storybook.js.org/docs/react/configure/overview)
#### cypress
Standard cypress (typescript) installation folder. See
[documentation](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Folder-structure)
#### Public
This directory is where all the static assets are stored. Also contains i18n translations
that will be injected by next-i18next. translationNamespaces in baseStaticHandler refers to
these file names. See [documentation](https://nextjs.org/docs/basic-features/static-file-serving)
for further questions.
#### Src
##### Components
All of the React components that are used on different parts of the project can
be found under this directory. These components are usually single responsibility
pieces that are handling their own logic and styling.
##### Config
Config files for global config rules.
##### Layouts
This directory contains main layouts used to wrap pages and large parts of the
user interface.
##### Pages
This is a directory specific to NextJS. It contains a React component per
route in the website. You can
read more about how routing is handled in a NextJS project
[here](https://nextjs.org/docs/basic-features/pages).
##### Styles
This directory contains definitions for different CSS variables that are used
around the project. It contains a global.css file that handles basic styling for all
elements and a stitches.config.ts file that instantiates a new stitches instance
and sets configuration for our design system.
##### Types
Global Typescript Types. All .d.ts files in this directory are automatically
included into typescript.
##### Util
This directory contains several utility files for different functionalities.
#### Test
Config/Setup Files for jest and testing-library.