next-ts-template

Scripts

Use yarn or npm run

Run Next JS development server.

$ yarn dev [--hostname=test.choseohwan.com --port=80]

Build Next JS application.

$ yarn build

Run Next Js production server with built Next JS application.

$ yarn start

Export Next JS application for production server.

$ yarn export

Run Storybook development server

$ yarn storybook

Build Storybook Application for production server.

$ yarn build-storybook

Run lint-staged to clean up code.
- need to "git add" the modified file.
- Recommend: Add 'git add' command to file watcher.

$ yarn lint-staged

Test Next JS application using Jest

$ yarn test

Run when husky's 'git hook' does not work.

$ yarn git-hook-reset

Directory Structure

|-- .env
|-- .eslintrc       : eslint configure file
|-- .gitignore      : git ignore file
|-- .prettierrc     : prettier configure file
|-- README.md       : README file
|-- next-env.d.ts   : next type declare file
|-- next.config.js  : next configure file
|-- package.json
|-- tsconfig.json   : typescript compiler configure file
|-- yarn.lock
|--[.storybook      : directory for storybook settings
|   |-- main.js
|   |-- preview.js
|   |-- tsconfig.json   : typescript config for storybook
|--[.jest           : directory for jest setting
|   |-- jest.config.js
|   |-- jest.setup.js
|   |-- tsconfig.jest.json
|--[public          : resource directory
|--[src             : source root
    |--[components      : component directory (used atomic design)
    |   |--[atoms
    |   |--[molecules
    |   |--[organisms
    |   |--[layout          : instead of template (component for layout style)
    |--[constants       : constant directory
    |--[libs            : internal library directory
    |--[modules         : reducer module directory (used immer-reducer)
    |   |-- index.ts
    |   |-- store.ts
    |--[pages           : Next JS pages directory
    |   |-- _app.tsx
    |   |-- index.tsx
    |--[sagas           : Redux-saga directory
    |   |-- index.ts
    |--[styles          : styles directory (used @emotion/core)
    |--[types           : user defined types directory

Atomic Design

Dependencies

Main

Next JS

The React framework for SSR

Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Redux

A Predictable State Container for JS Apps

Redux Saga

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.