應用 Next.js: 開發一個博客程序 - 入門

時間 2019-12-07

標籤應用 next.js 開發一個博客程序入門欄目 JavaScript 简体版

原文原文鏈接

環境配置

這篇文章的環境是Windows, 正好也說一下Windows下前段開發的工具鏈react

1. 安裝巧克力 https://chocolatey.org/instal...git

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2. 安裝Yarngithub

安裝Yarn包管理器會自動安裝Nodejs. shell

3. 建立項目express

md next.js-blog
cd next.js-blog
yarn init -y
# 安裝依賴模塊
yarn add express next@latest next-routes react react-dom styled-components
# 開發依賴模塊
yarn add --dev babel-plugin-module-resolver babel-plugin-styled-components

babel-plugin-module-resolver 是一個Babel模塊解析插件, 在.babelrc中能夠配置模塊的導入搜索路徑. 好比:json

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    ["module-resolver", {
      "root": ["./"]
    }]
  ]
}

由於.babelrc文件的路徑在項目根, 咱們指定配置module-resolver的root爲"./", 所以咱們在使用相似import X from 'path'導入模塊的使用能夠不指定../../這種相對路徑, 默認以項目根爲模塊的搜索路徑, 好比, 能夠在./pages/index.js頁面中導入位於./layouts的DefaultLayout.js模塊,而不用添加../做爲相對路徑:segmentfault

// filename: ./pages/index.js

# 自動路徑搜索
import DefaultLayout from 'layouts/DefaultLayout'
# 相對路徑
import DefaultLayout from '../layouts/DefaultLayout'

上面兩種導入方式效果是相同的, 第一種的前提是你要配置 module-resolver服務器

樣式

在這裏咱們使用 styled-components 組件, 關於styled-components如何使用, 請諮詢 Google, 這裏就不詳細說明了, 使用上是很簡單的.babel

建立佈局頁面

一個頁面, 最基本的就是佈局了, 頁頭, 內容, 頁腳. 最基本的三塊, 每一個頁面的頁頭和頁腳基本都是相同的, 頁頭和頁腳能夠做爲公共組件使用, 內容通常做爲一個容器組件去包含咱們實際須要顯示的內容, 在這裏實際上對於一個博客系統來講, 咱們須要顯示博客列表頁和博客內容頁.dom

import Head from 'next/head'
import styled from 'styled-components';
import Navigation from '../components/Navigation'
import Footer from '../components/Footer'
// 定義一個DIV容器組件, 用於包裹整個頁面.
const Container = styled.div`
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  main {
    flex: 1;
  }
`;
export default ({ children, title = '默認標題' }) => (
  <Container>
    <Head>
      <title>{ title }</title>
    </Head>
    <header>
      <Navigation />
    </header>
    <main>
      { children }
    </main>
    <Footer>
      這是頁腳
    </Footer>
  </Container>
)

渲染博客列表頁

// export default () => (
//   <div>Welcome to next.js!</div>
// )
import React from 'react'

import DefaultLayout from 'layouts/DefaultLayout'
import Post from '../components/PostItem'

import posts from '../data/posts.json'

console.log(posts)

const IndexPage = ({ posts }) => (
  <DefaultLayout>
    <ul>
      {posts.map(p => (
        <Post key={p.title} post={p} />
      ))}
    </ul>
  </DefaultLayout>
)

IndexPage.getInitialProps = async ({ req }) => {
  // const res = await getPosts()
  // const json = await res.json()
  return { posts: posts }
}


export default IndexPage