The source code using nextjs, reactjs, redux, es6, ts, express, eslint, typescript, jest..

• Link Demo
• Issue project board

Our source is created by CNA, after createing it should look something like:

├── node_modules
    ├── [...]
├── __tests__
├── .github
├── apis
├── components
    ├── Common
    └── Component1
    └── Component2
├── redux
├── server
    ├── routers
    ├── index.js
├── next.config.js
├── package.json
├── pages
    └── index.js
├── public
    └── fonts
    └── icons
    └── images
    └── locales
    └── styles
├── templates
    └── components
    └── redux
└── yarn.lock
├── README.md

Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and ./pages/about.js would map to /about.

Now we are using the custom server that using Express, so if you want to modify routers just focus on ./server/routes/prettyUrlRouter.ts

The ./public directory maps to /public in the next server, so you can put all your other static resources like images or compiled CSS in there.

See .env for development defaults.

• NodeJS, version >= 10.0.0 . (I use nvm to manage Node versions — brew install nvm.)

I am using yarn to install the package.

• npm install -g yarn

yarn

Running the app with the dev environment

yarn dev

Running the app with the production environment

yarn prod

TROUBLESHOOTING NOTE: If you are having trouble running the app for the first time please delete the node_module and run yarn again.

yarn test

Generate component

yarn gen type_of_gen type_of_component component_name

type_of_gen: Type of generator as component, redux. type_of_component: Type of component as single, many.

Ex: yarn gen component single ComponentA

yarn lint

yarn analyze

Add details of how to access the app from within Chrome

To view the state in the app install the Redux dev tools Chrome plugin.

(https://github.com/chauduong1192/web-next/issues)