create-nrs-web

It's a template based on create-next-app. The template provides bulti-in settings for the following items to make the website creation much esaier and flexible.

• Next.js
• Redux
• Redux middleware (choices: Redux-thunk/Redux-saga/Promise-middleware)
• Styled-Components: provides the basic flex-box layout
• Storybook

And the following options.

• Proxy
• TypeScript
• Jest
• Github action files

Usages

1. Create a new project

npx create-nrs-web

2. Modify README.md for the new project

3. Launch at the development environment

• Next.js

npm run dev

• Proxy

npm run proxy

• Test (Jest and Enzyme)

npm run test

• Show storybook

npm run storybook

4. Deploy to Nelify

• Commit and push to the Github repository
• Open Nelify and select the repository
• Deploy

Demo

• Demo site
• Demo storybook

Tutorial

• create-nrs-web — A Way to Build the Next.js, Redux, and Styled-Components Website Efficiently

Release notes

1.10.0: support Storybook

• 1.9.3: refactoring
• 1.9.1: fix the bug for the new option

1.9.0: provide an option to enable React profiler in production

• 1.8.3: support Jest for TypeScript

1.8.0 provide the default Nelify file

1.7.0 provide the basic layout

• 1.6.6: fix the bug for git clone
• 1.6.5: fix the bug for git clone

1.6.3 support TypeScript

• 1.5.4: fix the bug for git clone
• 1.5.3: add a references

1.5.2: support the page level Redux's state modifications

• 1.4.1: add a reference

1.4.0: add test cases for Redux (Redux-thunk/Redux-saga)

• 1.3.7: fix the bug for redux-saga
• 1.3.6: fix the bug for the new branch's name
• 1.3.5: resolve merged confilcts
• 1.3.4: remove log messages
• 1.3.3: fix the bug when running on Windows

References

Storybook

• Next.js & StoryBook (ㄧ)
• Deploy Storybook
• CLI options

TypeScript

• Jest + TypeScript：建置測試環境
• ts-node 的那些坑
• CONFIGURING JEST AND ENZYME IN CREATE REACT APP ON TYPESCRIPT
• Create react app typescript: testing with jest and enzyme
• Cannot use JSX unless the '--jsx' flag is provided

Page level Redux

• kirill-konshin/next-redux-wrapper
• Next.js pre-rendering

Jest

• Test Components in the Next.js- Part 2. Test Redux Components in different middlewares (Redux-thunk and Redux-saga)
• Test Components in the Next.js Project with Jest and Enzyme- Part 1. Steps for the Environment setting

Redux-saga

• Redux Middleware- The differences between Redux-thunk and Redux-saga

npm

• How to Publish an npx Command to Improve productivity?
• Publishing an npx command to npm
• NodeJs 交互式命令行工具 Inquirer.js - 开箱指南

Others

• Day 28 of #100DaysOfCode: Create the Proxy for Next.js application

About

• Author
• 100DaysOfCode
• Medium