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.

Home Page:https://next-boilerplate-movahedan.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 Build Badge

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

About

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://next-boilerplate-movahedan.vercel.app

License:MIT License


Languages

Language:TypeScript 81.8%Language:JavaScript 13.3%Language:CSS 3.7%Language:Dockerfile 0.9%Language:HTML 0.2%Language:Shell 0.1%