边学边写nextjs

这名字也能被占用
2,048 阅读3分钟

成果

这是一周后的一个感想。这是没有用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

不错，就是这个！

最后

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

avatar
文章
阅读
粉丝