Performance oriented Next.js application boilerplate with SWR, SASS, Chakra UI, Git Hooks, SEO, Babel, Jest, Emotion JS, ESLint, Prettier, Airbnb, CyPress, Faker JS, Hooks, Context API and Docker.

About

Next.js is a minimalistic React framework that runs on the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating, it's also a straightforward way for developers with React experience to get productive quickly.

The advantage of this approach is to be able to create rich user experiences in a uniform way, without compromising SEO (Search Engine Optimisation) factors that are key to good ranking on Google and other search engines.

This boilerplate makes it easier to get up and running with a well-structured Next.js and TypeScript application.

Features

next-boilerplate project provides a lot of features out of the box. Here's an overview of the included components and tools.

• Next.js - Minimalistic framework for server-rendered React applications.

• Chakra UI - Chakra UI for faster UI development.

• Graphql - A query language for your API.
  

• Faker.js - Generate Fake data using Faker.js.
  

• Graphql - Faker.js - Generate Data using Graphql using Faker.js.
  

• Docker - A tool designed to make it easier to create, deploy, and run applications by using containers.

• Sass/Scss - CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.

• Babel - The compiler for next generation JavaScript.

• ESLint - The pluggable linting utility.

• Bundler Analyzer - Visualize the size of webpack output files with an interactive zoomable treemap.

• Jest - Javascript testing framework , created by developers who created React.

• React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices.

• next-runtime-dotenv - Expose environment variables to the runtime config of Next.js

• Debugging - To debug Run dev command in terminal and Start VS Code in Debug mode. Install Debugger For Chrome Plugin first.

• Generator - Generate Pages and Components with Component-View pattern.
  

• ARC Desing Pattern

• Container Desing Pattern

• Git Workflow

Install VSCode Extensions

cat extensions.txt | xargs -L 1 code --install-extension

Install

yarn install

Setup

Set it to the command/path of your editor in ~/.zshenv or ~/.bashrc:

export EDITOR=<editorname>

Usage

yarn build

yarn start

Run tests

yarn run test

Author

Nilesh Bamne nilesh@gethelpnow.com

• Github: @nilesh-bamne
• LinkedIn: @nilesh-bamne-60007419

License

Licensed under the MIT License