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.

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
• [x] Setup configurable Fetch and SWR
• [x] Setup Analytics tools with separate business level abstracting Read 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

yarn dev

Open http://localhost:3000 with your browser to see the result.

Run the storybook

yarn storybook:dev

Open http://localhost:6006 with your browser to see the result.

Run the cypress

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.

yarn deploy:test
yarn deploy:e2e
yarn start

To build storybook, run the following command:

yarn storybook:build

Contributing

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

yarn commit-check