---
# System prepended metadata

title: next js building
tags: [javascript, nextjs, javascript es6]

---

###### 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
```bash
# outline
next js install
SASS install
```
## Next js install

```bash
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
```bash

# 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 通常為預設 不定額外+