Nextjs学习笔记（二）

这是Nextjs笔记的第三天，今天花时间研究了Nextjs里的API路由和链接组件，废话不多说，开撸。

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

我们知道，Nextjs是一款服务器端渲染框架，本质上是一个Nodejs应用，那么它顺理成章地继承了服务器应用的一切：处理API请求，查询数据库，执行SQL语句等。今天我们只讨论处理API请求的部分.

如何配置API路由

pages/api 目录下的任何文件都将作为 API 端点映射到 /api/*。

我们在pages目录下新建一个user.ts:

import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
    name: string,
    gender:string,
    age:number,
    email:string
  }
export default function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    res.status(200).json({ 
        name:'Andrew',
        gender:"female",
        age:20,
        email:"lala@gmail.com"
    })
}
  

然后，我们在浏览器里输入http://localhost:3000/api/user,收到结果：

{"name":"Andrew","gender":"female","age":20,"email":"lala@gmail.com"}

我们就可以根据此来配置我们的mock数据咯。我们还可以根据环境来动态配置baseURL。

封装SEO友好的Link组件

我们知道Nextjs里的Link组件，用来实现客户端的页面跳转：

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}
export default Home

看到我们把a标签包在了Link标签里了，为了SEO友好，搜索引擎可以抓取a标签的链接。为了复用该特性，我们可以封装自己的锚点组件：

//组件AnchorWrapper.tsx
import Link from 'next/link'
import React from "react"
type LinkWrapperPropsType = {
    href:string,
}
export const LinkWrapper:React.FunctionComponent<LinkWrapperPropsType> = ({ href, children })=>{
    // Must add passHref to Link
    return (
      <Link href={href} passHref>
          <a>
            {children}
          </a>
      </Link>
    )
}

//组件消费：
import {LinkWrapper} from "./AnchorWrapper"
<LinkWrapper key={menuItem.key} href={menuItem.url}>
    //自定义的组件
</LinkWrapper>

最后

最近一直在学习Nextjs，它的渲染方式与传统的客户端渲染方式有着很大的不同，必须换种方式来思考Nextjs的开发。

最后，感谢阅读。