Skip to content

serge20/travel-blog-next

 
 

Repository files navigation

travel-blog-next

# install dependencies
$ npm install

# serve with hot reload at localhost:1010
$ npm run dev

# build for production and launch server
$ npm run build

Project Structure

專案目錄結構

├─ api         # ��各模組 Api
│  └─ index       # 通用 Api
│
├─ assets      # 樣式等要 build 的東西
│  ├─ antd-custom    
│  └─ style       # 專案樣式
│
├─ components  # 組件
│
├─ Page        # 頁面,會自動生 route
│  ├─ index.js    # 首頁
│  └─ view.js     # 景點詳細頁面
│  └─ _app.js     # 設定redux
│
├─ static       # 靜態檔
│
├─ .babelrc     # babel 設定
│
├─ .routes     # routes 設定
│
├─ next.config.js # next 設定
│
├─ package.json
│
└─ README.md      # 你現在在看的這份文件

使用next.js 框架 , 實作步驟

1.npm i init
2.npn i react react-dom next
3.新增 page 資料夾與新增 index.js / _App.js / viewjs
4.導入 redux redux-saga react-redux next-redux-wrapper next-redux-saga
5.導入ant.desig
6.新增 api 資料夾統一管理 api
6.index.js使用 getInitialProps call Api 
7.新增 components 資料
8.新增 router 資料
8.將 header / footer / card 模組化
9.import header / footer / card 到 index.js 取 store 資料 進行 map
10.將資料傳遞到 card 子組件,整理並渲染
11.利用 next-routes 進行 :id 跳轉
12.git 新增 Repository , push

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.4%
  • CSS 2.6%