关于nextjs 的前端路由以及api路由学习以及静态图片资源的访问“这是我参与「第五届青训营」伴学笔记创作活动的第

“这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

关于 nextjs 新建相关的路由操作

在nextjs 当中创建路由以及相关的配置

通过文件名来当做路由

需要在pages 文件夹中进行创建，我们创建一个文件 src/pages/about.tsx (如果是ts 文件后缀.tsx /js 文件后缀.jsx)

import React from "react";

//这里组件的名称首字母都要大写 （默认约束）
function About() {
    return (
        // 这里代码需要写在<> 括号里面  
        // 这里采用的是约定式路由 也就是 pages/下 你ts编写语法 .tsx (js->.jsx) 作为你的路由
    <>
        <div>About</div>
        <h1>1</h1>
    </>
    )
}

//导出  保存后即可在服务端/about 访问当对应的内容信息
export default About;

动态路由

动态路由我们不像单一路由一样直接创建，而是首先需要创建一个目录在这个目录下面去创建对应的组件
组件的书写方式[xxx].tsx
比如是说我们需要隐含用户的详情（根据用户的id）
我们可以在src/pages下创建一个文件夹user 再创建一个[id].tsx 的文件
src/pages/user/[id].tsx 文件

import React from "react";

function Index() {
    return (
        <>
            <div>user detail</div>
            <h1>hello</h1>
        </>
    )
}

export default Index;

此时查询对应的网址 /user/1

一个运用案例

import { Inter } from '@next/font/google'
import Link from 'next/link'// 这里导入nextjs 自带的link 标签组件

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      {/* 我们这里定义一个数组 */}
      {/* 书写方式1 */}
      {/* 
      {
        // 我们通过map去循环的渲染 Link 是他所对应的组件
        [1, 2, 3, 4, 5].map((id) => ( //这里的map 循环 是一定要带上key 的
          <Link href={`/user/${id}`} key={id}>
            user {id}
          </Link>
        ))} */}
      {/* 书写方式2 */}
      <ul>
        {
          // 我们通过map去循环的渲染 Link 是他所对应的组件
          [1, 2, 3, 4, 5].map((id) => ( //这里的map 循环 是一定要带上key 的
            <li key={id}>
              <Link href={`/user/${id}`}>
                user {id}
              </Link>
            </li>
          ))}
      </ul>
    </>
  )
}

nextjs 中的api 路由

首先我们去api下面创建一个简单的案例 hello.ts
src/pages/api/lan.ts

import { NextApiRequest, NextApiResponse } from "next"

// 我们的访问需要一个接口
interface Lan{
    name:string;
}

export default function Lan(
    req: NextApiRequest,
    res: NextApiResponse<Lan>
){
    // res //返回相关信息 
    res.status(200).json({
        //因为我们这里添加了泛型约束 所以这里也需要加上
        name:'蓝',
    })
}
//此时 通过网址/api/Lan 就可以访问到对应的数据

因此，总而言之我们在api 下面要是有默认导出，那么就会映射成我们的路由

动态api 路由

首先，我们也需要创建一个文件夹来存放
我们在api下创建一个name 文件夹并创建[id].ts 文件
src/pages/api/name/[id].ts

import { NextApiRequest, NextApiResponse } from "next";

interface Name{
    name:string;
}

export default function Name(
    req: NextApiRequest,
    res: NextApiResponse<Name>
){
    // 动态路由获取对应的参数
    
    res.status(200).json({
        name:'姓氏 '+req.query.id, //req.query.id 获取我们传递的id 参数
    });
}
//访问路径/name/1

关于nextjs 导入静态文件

public 就是默认的静态资源比如cs 和js

在nextjs 当中导入静态文件需要在public 文件夹中直接进行导入即可，导入完成后直接通过网址路径/xxx(图片名.对应的后缀) 即可直接访问

比如我的测试案例 http://localhost:3000/LEnd.jpg

总结：这是我学nextjs第一天，年前事情还是比较多，回家后抽时间赶紧学。总体来说，nextjs 相对于之前我学习的EGG框架，目前看来是会更加的方便。在路由上的管理，以及对于api接口的书写上。EGG会需要多方面的文件相互调配，而next.js 直接导出就可以直接在对应的网址端口访问了。相当于导出后，next自动给你配置好对应的路由。

关于nextjs 的前端路由以及api路由学习 以及静态图片资源的访问