---
# System prepended metadata

title: Next.Js 開發筆記
tags: [Book, Templates]

---

# Next.Js 開發筆記

View the book with "<i class="fa fa-book fa-fw"></i> Book Mode".

# Server端模擬登入的方法
利用express(Node.js框架)
判斷path路徑為需要驗證頁面

const router = express.Router()
router.get('/login', function (req, res) {
  res.send('hello world')
})

# 1/10 - 會議記錄
SPA && MVC架構
https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/

API規範 RESTful
https://ithelp.ithome.com.tw/articles/10201503

http status code 
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status

reProxy
前端(瀏覽器)透過網路伺服器去轉發請求

SSR CSR Isomorphic
Next.js = SSR && CSR

Gary技術分享 - React Native 圖片保存至Ios / Android的方法
https://blog.csdn.net/huhu_study/article/details/80826821
https://www.cnblogs.com/jackson-yqj/p/9556468.html

1. 從前後端分離開始的現代前端, 切版只是基本功, 除動畫處理外, 資料處理也是前端必須關注的事情, 所以必須知道的基本常識有 

A. RESTFul API 規範

HTTP 請求方法(Request Method):
- GET 單純的取得資料 或透過 某些Query string 條件來查詢資料
- POST 已送出表單的方式來新增資料
- PUT 已送出表單的方式來更新資料
- DELETE 刪除資料
- OPTIONS 當產生跨域情況時, 瀏覽器會自動幫你先發出這個非同步請求去問後端伺服器支援哪些Request Method



B. 反向代理伺服器 ReProxy
前端因 SPA的關係, 跟後端呼叫API一定是透過非同步請求的方式進行,
所以一定需要知道 反向代理伺服器。
反向代理伺服器 就是 讓前端(瀏覽器) 透過 網頁伺服器 去轉發請求


C. HTML5 Web Storage
local storage,
session storage,
cookie
這三種的差異需要知道

D. SSR (Server side render) vs CSR (Client side render) 的區別, Isomorphic同構是什麼
https://blog.v123582.tw/2018/09/18/Isomorphic-SSR-%E7%9A%84%E7%AC%AC%E4%B8%80%E5%93%A9%E8%B7%AF%EF%BC%9A-Next-js/




Examples
---
- [express Node.js框架](/s/book-example)
- [Slide example](/s/slide-example)
- [YAML metadata](/s/yaml-metadata)
- [Features](/s/features)

Examples
---
- [Book example](/s/book-example)
- [Slide example](/s/slide-example)
- [YAML metadata](/s/yaml-metadata)
- [Features](/s/features)

Themes
---
- [Dark theme](/theme-dark?both)
- [Vertical alignment](/theme-vertical-writing?both)

###### tags: `Templates` `Book`
