Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/movahedan/next-boilerplate

A well-structured production-ready Next.js boilerplate with a well-documented directory structuring that supports Typescript, Jest, react-testing-library, Cypress, configurable Fetch and SWR, and a configured component library using Emotion, twin.macro, Tailwind, and Storybook. Plus, taking advantage of NextSeo and NextSitemap.
https://github.com/movahedan/next-boilerplate

boilerplate cypress emotion fetch jest next-seo next-sitemap nextjs postcss react react-test-renderer react-testing-library storybook swr tailwindcss typescript

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/movahedan/next-boilerplate
Owner: movahedan
License: mit
Created: 2021-09-04T21:20:10.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2021-12-17T13:15:32.000Z (over 2 years ago)
Last Synced: 2024-04-16T05:55:02.890Z (3 months ago)
Topics: boilerplate, cypress, emotion, fetch, jest, next-seo, next-sitemap, nextjs, postcss, react, react-test-renderer, react-testing-library, storybook, swr, tailwindcss, typescript
Language: TypeScript
Homepage: https://next-boilerplate-movahedan.vercel.app
Size: 3.86 MB
Stars: 21
Watchers: 5
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-stars - next-boilerplate - structured production-ready Next.js boilerplate with a well-documented directory structuring that supports Typescript, Jest, react-testing-library, Cypress, configurable Fetch and SWR, and a configured component library using Emotion, twin.macro, Tailwind, and Storybook. Plus, taking advantage of NextSeo and NextSitemap. | movahedan | 21 | (TypeScript)

README

        # Next.js opinionated boilerplate

A well-structured production-ready Next.js boilerplate with a well-documented directory structuring that supports Typescript, Jest, react-testing-library, Cypress, configurable Fetch and SWR, and a configured component library using Emotion, twin.macro, Tailwind, and Storybook. Plus, taking advantage of NextSeo and NextSitemap. 

![Coverage Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/movahedan/49ff7044879e43a1daf430086b622c53/raw/next-boilerplate__heads_main.json)

![Build Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/movahedan/49ff7044879e43a1daf430086b622c53/raw/next-boilerplate__build_badge.json)

## Benefits

### Project maintenance

- [x] Setup strong Linter, lint-staged, husky

- [x] Setup Jest and react-test-renderer

- [x] Setup Cypress

- [x] Setup GitHub actions

- [x] Deploy on vercel

- [x] Dockerize it

### Application development

- [x] Setup directory structure and global types [Read documentation](https://github.com/movahedan/next-boilerplate/blob/main/docs/directories.md "Directories documentation")

- [x] Setup configurable Fetch and SWR

- [x] Setup Analytics tools with separate business level abstracting [Read documentation](https://github.com/movahedan/next-boilerplate/blob/main/docs/analytics.md "Analytics documentation")

- [x] Setup SEO optimization (NextSeo, NextSitemap)

-	Setup Error Handling and Reporting

- Setup Redux

### Styling

- [x] Setup Emotion and twin.macro with fully-configured Tailwind

- [x] Setup UI library (Storybook installed with some helper functions)

-	[x] Setup MediaQuery module (SSR support)

- [x] Setup optimized, easy to change, testable Google font

- [x] Setup Layout structure (Per page layout support)

-	Implement a minimal component library (with the help of headless ui)

### Additional hooks

  - [x] useAliveRef

  - [x] useCombinedRef

  - [x] useElementSize

  - [x] useIntersect

  - [x] useResizeEffect

  - [x] useScrollEffect

  - [x] useThrottleCallback

  - [x] useThrottleEffect

  - useInfiniteLoader

  - useClipboard

  - useLocalStorageState

  - useCookieState

  - useNetworkStatus

### Additional components

  - TruncatedText

## Running

After cloning repository, go to the directory you've cloned into.

##### Run the development server

```bash

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

##### Run the storybook

```bash

yarn storybook:dev

```

Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.

##### Run the cypress

```bash

yarn cypress:dev

```

## Build and deploy

To check for a clean deployment and run the project run the following commands, they will take care of unit testing, e2e testing and create production-optimized build of application.

```bash

yarn deploy:test

yarn deploy:e2e

yarn start

```

To build storybook, run the following command:

```bash

yarn storybook:build

```

## Contributing

Fist change the thing you with to be changed and check your staged changes status with the following command.

```bash

yarn commit-check

```