目录

一、Nextjs框架创建React项目

二、路由的使用

1、静态路由

2、动态路由

3、Link路由跳转

4、Api路由

5、Api动态路由 

三、Nextjs中加载js脚本

四、Nextjs中加载图片

五、Nextjs的公共布局

六、Pages的其他特性

一、Nextjs框架创建React项目

快速入门 | Next.js | Next.js中文网

yarn create next-app --typescript

二、路由的使用

Nextjs里的路由相对于传统ReactRouter路由更能满足SEO优化的需求，通过路径来进行路由更能被搜索引擎收录。

1、静态路由

pages目录下的.tsx文件都能被浏览器直接访问到：

localhost:3000

localhost:3000/ Two  

可以直接被访问到。

2、动态路由

与传统路由不同的是，动态路由需先创建一个目录，再到目录下创建传参文件，如下：

 相当于localhost:3000/user/:id这个id可以动态改变，都可以访问到对应的文件。

3、Link路由跳转

Link标签相当于传统H5里的a标签

如：完成动态路由的跳转

import Link from "next/link";
import styles from "../styles/Home.module.css";export default function Home () {return (
{[1, 2, 3, 4, 5].map((id) => (
user {id}
))}
);
}

4、Api路由

import type { NextApiRequest, NextApiResponse } from 'next'interface Apple{name:string
}export default function apple(req: NextApiRequest,res: NextApiResponse
){res.status(200).json({ name: 'Apple' })
}

5、Api动态路由 

import type { NextApiRequest, NextApiResponse } from "next";interface Fruit {name: string
}export default function fruit (req: NextApiRequest,res: NextApiResponse
) {res.status(200).json({ name: "水果" + req.query.id });
}

三、Nextjs中加载js脚本

创建你的js脚本到public目录：

 页面中引入并使用Script标签：

import styles from "../styles/Home.module.css";
import Script from "next/script";export default function Home () {return (