bygaga63 / next-boilerplate

A well-structured production ready Next.js boilerplate with Typescript, Redux, Jest, Enzyme, Express.js, Sass, Css, EnvConfig, Fetch, Reverse Proxy, Bundle Analyzer and Built-in Project CLI. https://pankod.github.io/next-boilerplate/

Performance oriented Next.js application boilerplate with Redux, Typescript, Express.js and Sass.

_{Created by Pankod}

About

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

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

This boilerplate make it easier to get started with a well-structured Next.js and TypeScript application.

By the end of setup, you'll have a Next.js project and features which is specified at the below.

Features

This boilerplate includes the latest powerfull tools.

• Next.js - Minimalistic framework for server-rendered React applications.
• Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
• Redux - State management
• Express.js- Handles server-side rendering and integrated with Express.js
• Built-in Project CLI- Create pages, components, actions, reducers with one command by using built-in cli.
• Sass/Scss - CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
• Docker - A tool designed to make it easier to create, deploy, and run applications by using containers.
• Babel - The compiler for next generation JavaScript.
• Eslint - The pluggable linting utility.
• Reverse Proxy - A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server
• Bundler Analyzer - Visualize size of webpack output files with an interactive zoomable treemap.
• dotenv .config - Expose environment variables to the runtime config of Next.js
• Jest - Javascript testing framework , created by developers who created react
• Enzyme - JavaScript testing utility for React that makes it easier to test your React Components output.

Setup & Documentation

Please refer to our setup guide to create a new app.

For more detailed documentation, check out https://pankod.github.io/next-boilerplate/

Built-in CLI

Pankod boilerplate is shipped with a CLI tool to streamline the creation of new components. By using the CLI tool, you may easily add pages, class components or functional components to your project and have all the required actions, reducers and imports are automatically created for you.

To start the CLI, you may run the following npm command:

npm run cli

After starting, an interactive menu will let you configure the component the be created. Firstly, you'll be asked for the type of the component whether it's a page, functional component or class component. Then you'll be prompted with the other options relevant to your selection of the component type.

After answering questions it generates files in miliseconds.

License

Licensed under the MIT License, Copyright © 2018-present Pankod