###### tags: `nextjs` `javascript es6` `javascript`

# next js building

## Demand install package

1. [node js](https://nodejs.org/en/download/)

## CSS
[css style guide](https://cythilya.github.io/2018/05/22/bem/)

## Base Concept

Nextjs is base on the **React** and SSR.
**SSR** full-name is called as the Server side render this has helpful SEO(search engine optimization).

The whole is worked the **javascript es6** support.

[Official website](https://nextjs.org/)

# Install

# outline
next js install
SASS install

## Next js install

npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

## Install the sass in next js

npm install --save @zeit/next-sass node-sass

const withSass = require('@zeit/next-sass')
module.exports = withSass()

# Common package

# external package
@zeit/next-sass
node-sass
styled-components

# dummy data
json-server

# Package.json Introduction

[click](https://docs.npmjs.com/misc/scripts)

前端
[hide&show](https://www.pluralsight.com/guides/how-to-show-and-hide-reactjs-components)

# To be contiuned

# dummy-data server

## json-server

# CSS

上下層如相沖則建議對該層也增設

position
- absolution 絕對位置
- fixed 鎖住畫面
- relative 通常為預設 不定額外+