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.
- Setup strong Linter, lint-staged, husky
- Setup Jest and react-test-renderer
- Setup Cypress
- Setup GitHub actions
- Deploy on vercel
- Dockerize it
- 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
- 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)
- useAliveRef
- useCombinedRef
- useElementSize
- useIntersect
- useResizeEffect
- useScrollEffect
- useThrottleCallback
- useThrottleEffect
- useInfiniteLoader
- useClipboard
- useLocalStorageState
- useCookieState
- useNetworkStatus
- TruncatedText
After cloning repository, go to the directory you've cloned into.
yarn devOpen http://localhost:3000 with your browser to see the result.
yarn storybook:devOpen http://localhost:6006 with your browser to see the result.
yarn cypress:devTo 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 startTo build storybook, run the following command:
yarn storybook:buildFist change the thing you with to be changed and check your staged changes status with the following command.
yarn commit-check