邊學邊寫nextjs

初衷

筆者自身是寫了一個網站，用於存儲一些好玩的網站，以便本身隨時玩。可是第一次進去的時候發現個問題，就是加載時間太長了，20s左右纔出現數據。等待是時間過長，不是一個好選項，而且對搜索引擎也不友好。因此準備看看服務端渲染（夢迴jsp）。

Next.js

我也是跟着百度一路搜索到next的，由於自己頁面搭建就是用的react，因此對於我來講是至關友好的。以前想着本身搭建，不過太亂了，沒有一個統一的標準，問題也是千奇百怪。因此直接用next，先學會，再深刻。話很少說，直接開幹。

安裝

新建文件夾，而後執行

cnpm install next react react-dom --save複製代碼

打開 package.json並添加如下內容 scripts：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}複製代碼

不一樣的命令，對應不一樣的開發環境。

直接npm run dev（-p能夠改端口，因爲筆者默認端口3000被佔用，因此換一個）會報錯，能夠看到報錯信息，沒有pages文件夾

新建pages/index.js

// index.js
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage複製代碼

再run一次

完美，萬事開頭難，完美度過前前前期。

路由

查看官網，頁面根據其文件名與路由關聯。例如pages/about.js映射到/about。說到路由，就不得不提超連接。

next裏超連接有專門封裝

// index.js
// 超連接
import Link from 'next/link'

function HomePage() {
  return <div> Welcome to Next.js! <Link href="/about"> <a>to about</a> </Link> </div>
}

export default HomePage複製代碼

// about.js
import React from 'react'

class About extends React.Component {
  render() {
    return (
      <div> about page </div>
    )
  }
}

export default About複製代碼

再次進入頁面，點擊"to about"，進入了about頁面。恩，符合上面規則

路徑映射

有個猜測，路徑/a/b/c會不會是對應pages裏的文件夾路徑/pages/a/b/c.js。

pages文件夾下，新建/inner/one.js

// one.js
import React from 'react'

class One extends React.Component {
  render() {
    return (
      <div> One page </div>
    )
  }
}

export default One複製代碼

就不用點擊進入了，直接輸入地址http://localhost:5555/inner/one看看啥效果

，很對，是這麼回事兒。

這時，有一個疑惑新生。若是我只想在pages下寫一個文件，可是路徑對應倒是另外一個，可行嗎？

pages下新建out.js

// out.js
import React from 'react'

class Out extends React.Component {
  render() {
    return (
      <div> Out page </div>
    )
  }
}

export default Out複製代碼

修改一下index.js裏的代碼

import Link from 'next/link'
function HomePage() {
  return <div> Welcome to Next.js! <Link href="/about"> <a>to about</a> </Link> <br/> <Link href="/out" as ="/outpage/out" > <a>to out</a> </Link> </div>
}

export default HomePage複製代碼

進入首頁，點擊「to out」，可行，可是一刷頁面就報404，這也致使了無法配置路由。不過還好官方給了答案，自定義服務器，這個後續再說，先把路由寫完。

路由參數

如何獲取路由的參數，next裏只能配置這種路由，url?a=1&b=2，若是想配置這種url/a/b，則跟自定義服務器掛鉤，因此暫不考慮。

還有一點忘記說了，就是若是不用Link該怎麼跳轉呢

修改以下

// index.js
import Link from 'next/link'
// 引入router組件
import Router from 'next/router'

function HomePage() {
  return <div> Welcome to Next.js! <Link href={{ pathname: '/about', query: { name: 'abc' }}}> <a>to about</a> </Link> <br/> <button onClick={(e) => { Router.push({ pathname: '/about', query: { name: 'abc' }, }) }} >click</button> </div>
}

export default HomePage複製代碼

// about.js
import React from 'react'
// 引入路由
import { withRouter } from 'next/router' 

class About extends React.Component {
  render() {
    return (
      <div> about page! name is : {this.props.router.query.name} </div>
    )
  }
}

export default withRouter(About)複製代碼

進入首頁，點擊to about

不錯，就是這個！

最後

自己也沒深刻了解，還在初學階段，也就至關於一個學習筆記了。