Overview:

The Next.js opinionated boilerplate is a well-structured and production-ready boilerplate for Next.js applications. It comes with a fully-documented directory structure and supports various features such as Typescript, Jest, react-testing-library, Cypress, configurable Fetch and SWR, and a configured component library using Emotion, twin.macro, Tailwind, and Storybook. It also includes NextSeo and NextSitemap for SEO optimization.

Features:

• Setup strong Linter, lint-staged, husky
• Setup Jest and react-test-renderer
• Setup Cypress
• Setup GitHub actions
• Deploy on Vercel
• Dockerize the application
• Setup directory structure and global types
• Setup configurable Fetch and SWR
• Setup Analytics tools with separate business level abstracting
• 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)
• Additional hooks: useAliveRef, useCombinedRef, useElementSize, useIntersect, useResizeEffect, useScrollEffect, useThrottleCallback, useThrottleEffect, useInfiniteLoader, useClipboard, useLocalStorageState, useCookieState, useNetworkStatus
• Additional components: TruncatedText, Running

Installation:

1. After cloning the repository, navigate to the directory you’ve cloned into.
2. Run the development server using the command npm run dev.
3. Open http://localhost:3000 with your browser to see the result.
4. Run the Storybook using the command npm run storybook.
5. Open http://localhost:6006 with your browser to see the result.
6. Run the Cypress tests.
7. Build and deploy the application using the following commands.

Build and deploy:

To ensure a clean deployment and run the project, execute the following commands:

• To build the Storybook: npm run build-storybook
• To deploy the project: npm run deploy

Summary:

The Next.js opinionated boilerplate is a comprehensive and well-structured boilerplate for Next.js applications. It includes a wide range of features and tools such as Typescript, Jest, Cypress, Fetch and SWR, Emotion and Tailwind for styling, SEO optimization, error handling, Redux, and much more. With its clear directory structure and extensive documentation, it provides developers with a solid foundation to start building their Next.js projects.