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

• Setup strong Linter, lint-staged, husky
• Setup Jest and react-test-renderer
• Setup Cypress
• Setup GitHub actions
• Deploy on vercel
• Dockerize it

  Application development

• Setup directory structure and global types Read documentation
• Setup configurable Fetch and SWR
• Setup Analytics tools with separate business level abstracting Read documentation
• Setup SEO optimization (NextSeo, NextSitemap)
• Setup Error Handling and Reporting
• Setup Redux

  Styling

• Setup Emotion and twin.macro with fully-configured Tailwind
• Setup UI library (Storybook installed with some helper functions)
• Setup MediaQuery module (SSR support)
• Setup optimized, easy to change, testable Google font
• Setup Layout structure (Per page layout support)
• Implement a minimal component library (with the help of headless ui)

  Additional hooks

• useAliveRef
• useCombinedRef
• useElementSize
• useIntersect
• useResizeEffect
• useScrollEffect
• useThrottleCallback
• 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