应用 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

关于 `_document.js`

另外在 ./pages目录下还有一个特殊的文件_document.js, 用于控制整个页面的骨架. 这个自定义的 _document.js 能够让你覆盖默认的页面布局, 注入如你本身的样式, 等等.

获取数据

这里为了简化, 我只是使用了一个JSON文件, 其中包含了博客的标题, 链接等信息. 把posts.json 文件导入为一个JavaScript对象. 能够直接使用

代码仓库

https://github.com/developerw...

注:
Windows 下的Git命令注意设置一下: git config --global core.autocrlf false

最终效果

参考资料

Next.js通用动态路由 (何谓通用? 就是在服务器端和客户端均可以使用的路由)
Next.js仓库