⛔️ DEPRECATED

Please use next-ts-template instead of this project.

next-ts-template

Next js template with Typescript.

Learn how to use github template.

Scripts

Use yarn or npm run

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

• Run Next JS development server.

$ yarn build

• Build Next JS application.

$ yarn start

• Run Next Js production server with built Next JS application.

$ yarn export

• Export Next JS application for production server.

$ yarn storybook

• Run Storybook development server

$ yarn build-storybook

• Build Storybook Application for production server.

$ yarn lint-staged

• Run lint-staged to clean up code.

$ yarn test

• Test Next JS application using Jest

$ yarn git-hook-reset

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

Directory Structure

|-- .env
|-- .eslintrc       : eslint configure file
|-- .gitignore      : git ignore file
|-- .prettierrc     : prettier configure file
|-- README.md       : README file
|-- babel.config.js : babel configure file (for jest)
|-- 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
|   |-- config.js
|   |-- main.js
|   |-- webpack.config.js
|--[config          : directory for other settings
|   |-- jest.config.js
|   |-- jest.setup.js
|   |-- lint-staged.config.js
|   |-- tsconfig.jest.json
|--[public          : resource directory
|--[src             : source root
    |--[components      : component directory (used atomic design)
    |   |--[atoms
    |   |--[molecules
    |   |--[organisms
    |   |--[templates
    |--[constants       : constant directory
    |--[data            : directory for sample json of response data
    |--[libs            : internal library directory
    |   |-- axios.ts
    |   |-- test-utils.tsx
    |   |-- AppProvider.tsx
    |--[modules         : reducer module directory (used immer-reducer)
    |   |-- reducer.ts
    |   |-- store.ts
    |--[pages           : Next JS pages directory
    |   |-- _app.tsx
    |   |-- index.tsx
    |--[sagas           : Redux-saga directory
    |   |-- index.ts
    |--[stories         : storybook directory
    |--[styles          : styles directory (used @emotion/core)
    |--[svg             : svg directory
    |--[types           : 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.

Development

ESLint

• Find and fix problems in JavaScript code.

Prettier

• An opinionated code formatter

Storybook

• Storybook is a user interface development environment and playground for UI components.

Lint Staged

• Run linters against staged git files and don't let slip into your code base.

Husky

• Husky can prevent bad git commit, git push and more.

Test

Jest

• JavaScript Testing Framework with a focus on simplicity.

React Testing Library

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

Axios Mock Adapter

• Axios adapter that allows to easily mock requests

ETC..

Axios

• Promise based HTTP client for the browser and node.js

Immer

• Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way.

Immer Reducer

• Type-safe and terse reducers with Typescript for React Hooks and Redux using Immer.

@emotion/core

• Emotion is a library designed for writing css styles with JavaScript.