https://github.com/rodrigowpl/frontend-next-boilerplate
A React advanced boilerplate using NextJS, TypeScript, Styled Components and PWA support
https://github.com/rodrigowpl/frontend-next-boilerplate
dependabot eslint github-actions jest nextjs prettier pwa reactjs storybook styled-components testing-library typescript
Last synced: 8 months ago
JSON representation
A React advanced boilerplate using NextJS, TypeScript, Styled Components and PWA support
- Host: GitHub
- URL: https://github.com/rodrigowpl/frontend-next-boilerplate
- Owner: rodrigowpl
- Created: 2020-08-31T02:21:55.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-05-29T05:19:48.000Z (about 3 years ago)
- Last Synced: 2025-06-26T13:48:46.079Z (12 months ago)
- Topics: dependabot, eslint, github-actions, jest, nextjs, prettier, pwa, reactjs, storybook, styled-components, testing-library, typescript
- Language: TypeScript
- Homepage:
- Size: 1.34 MB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Next Boilerplate
## What's inside it?
- [ReactJS](https://reactjs.org/docs/getting-started.html)
- [NextJS](https://nextjs.org/docs)
- [TypeScript](https://www.typescriptlang.org/)
- [Styled Components](https://styled-components.com/docs)
- [Jest](https://jestjs.io/docs/en/getting-started)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
- [Eslint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Husky](https://github.com/typicode/husky)
- [Plop](https://plopjs.com/) to automatize components creation structure, see more detail [here](https://github.com/rodrigowpl/react-next-boilerplate#components-structure)
## Dependencies
- Node js => v10
## Up and Running
- Install dependencies `yarn (or npm i)`
- Run `yarn dev (or npm dev)` to run next development server (it will be available in `http://localhost:3000`
- Run `yarn generate [ComponentName]` to create a new component structure automatically (the result will be generated in `src/components/[ComponentName]`)
## Available scripts
- `yarn dev (or npm dev)`: Run next development server
- `yarn build (or npm run build)`: Generate next production build
- `yarn start (or npm start)`: Run next production server
- `yarn test (or npm run test)`: Run tests
- `yarn test:watch (or npm run test)`: Run tests in watch mode
## Components structure
```
├── /src/
│ ├── /components/
│ ├── /[ComponentName]/
├── /index.tsx/ # Component file
├── /styles.ts/ # Component styled-components styles
├── /test.tsx/ # Component test file
```
## How to use it?
Run `yarn create next-app -e https://github.com/rodrigowpl/frontend-next-boilerplate`
Enjoy it :)