边学边写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

不错，就是这个！

最后

自己也没深刻了解，还在初学阶段，也就至关于一个学习笔记了。