阅读 202

边学边写nextjs


成果

这是一周后的一个感想。这是没有用next之前的页面,www.uquwang.net:7890/,这是用next改版后的页面www.uquwang.net。大家可以感受一下,那速度简直不是之前能比的,像坐了火箭一样,感动到哭。说到底服务端渲染还是牛逼啊,这东西撇都撇不掉。特别提醒,一定要注意大小写,在next/Link上栽了个大坑,花了7个小时,才在linux里发现问题,需要写成next/link。

初衷

笔者自身是写了一个网站,用于存储一些好玩的网站,以便自己随时玩。但是第一次进去的时候发现个问题,就是加载时间太长了20s左右才出现数据。等待是时间过长,不是一个好选项,并且对搜索引擎也不友好。所以准备看看服务端渲染。

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

不错,就是这个!

最后

本身也没深入了解,还在初学阶段,也就相当于一个学习笔记了。