next.js极速入门

ZhuAiQuan

已于 2022-11-03 16:22:08 修改

阅读量2.2k

点赞数 2

分类专栏：日常码文章标签： javascript 前端 webpack

于 2022-11-03 16:18:25 首次发布

本文链接：https://blog.csdn.net/ZhuAiQuan/article/details/127669687

版权

日常码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于Next.js
next可以理解成服务端来渲染react应用，如同nuxt之于vue，next相对来说比nuxt更加优秀。

前置条件：

熟悉react；
熟悉前面博客文章写的nuxt;

话不多说，直接上才艺：

拉脚手架

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

按照控制台提示依次输入项目名称/是否使用ts/eslint代码检查，然后等待控制台执行完。

启动
npm run/pnpm/yarn dev

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

目录结构
在这里插入图片描述
.next 启动或者构建生成的文件
components 公共组件库
pages 默认的路由页面，逻辑同nuxt，index.js为该目录的默认文件，[id]带路由参数的路由文件，新建的文件夹为新的路由等；
public 公共文件夹。相当于express/koa等配置的静态文件夹，里面的文件可以用相对路径/找到（比如public里有一个images文件夹且images文件夹里有一张logo.png图片，那么这张图片的路径可以写成/assets/logo.png）
styles 样式文件夹需要注意的是next似乎只支持.module.css模块化的样式写法
模块化的样式写法是：
在这里插入图片描述
创建一个xx.module.css样式文件；
import styles from ‘这个module.css文件’
使用styles.样式名指定

需要注意的是import进来的样式是一个扁平化的对象（这句话的意思是假如你用了sass写的层级样式，import进来会自动扁平化成一层）；所以我感觉sass之类的样式预处理一下子失去了灵魂。

pages里有一个_app.js文件，这个文件相当于所有路由视图文件公共的layouts，也就是说这个_app.js包裹了所有的路由视图文件，所以，你可以在这个地方放一些公共的样式/script脚本之类的东西。

路由跳转
通过next内置的一些组件自动跳转或者通过react-router跳转

点击链接跳转

import Link from 'next/link'

<Link href="/blog/hello-world">Blog Post</Link>
//携带参数
<Link
   href={{
     pathname: '/blog/[slug]',
     query: { slug: post.slug },
  }}
>
 xxx
</Link>

通过js跳转

import { useRouter } from 'next/router'

// 组件内部
const router = useRouter()

输出router 可以发现里面有这些方法
在这里插入图片描述
用它的push或者replace方法来路由跳转(感觉同vue-router);

数据请求
不需要服务端渲染的请求（也就是说客户端的请求）可以用任意的xmlhttprequest/fetch请求，不过官方还是推荐用swr 由于~~最近一段时间~~（已经过去很久了） vercel部署的网站打不开，所以我就不演示了官网有示例 npm也有

服务端请求

暴露一个getServerSideProps方法来告诉next需要服务端来请求数据。getServerSideProps内部进行请求并最终return给组件
举个栗子：
在这里插入图片描述
在getServerSideProps内部同步请求并return给组件的props，组件则可以通过props拿到其数据。
在服务端请求并渲染的好处是隐藏服务器的真实api接口，且用了该数据服务端会渲染好页面，利好seo。

需要注意的是getServerSideProps并非随意取的名字，不可随意取更改哦。如果是动态路由页面需要取参数，getServerSideProps函数有形参输出形参或者直接输出arguments即可拿到那些动态数据(提示一下，getServerSideProps是运行在服务器端的，在这里输出可不会显示在浏览器F12的Console面板里哦，会打印在启动服务的控制台里);需要的路由参数就在query对象里。

还有个静态站点渲染请求getStaticProps 我就不说了大家可以自己去看官方文档

页面Head信息
next有内置好多公共组件，其中有一个是head相关的。每一个页面都可以有不同的标题啦，meta啦，script还有样式啦之类的东西。
通过import导入head组件

import Head from 'next/head';

// 组件内
<Head>
	<title>next 服务端渲染 demo</title>
	<!-- 其他的东西都可以写，会自动渲染到head标签里 -->
</Head>

此时页面的标题就是next 服务端渲染 demo

部署
参考这个 Linux 使用Nginx部署Next项目，并使用pm2进程守护

其他
next还内置好多好多组件比如图片优化的Image import Image from 'next/image' 脚本加载Script import Script from 'next/script' 等等，需要了解的话看看官网文档

最后
补充一个我觉得next究极离谱的功能，我觉得是时候可以干掉（不是）后台了；
在next里的pages文件夹下有一个api文件夹，这个是可以用来写接口的地方，不过这里面写好的接口不能用于getServerSideProps或者getStaticSideProp中调用，简言之就是说只能在客户端调用。（毕竟不管是getServerSideProps还是getStaticSideProp都是运行在node服务端滴不会有跨域之类的影响）
如果想要回到由前端掌握的前后端项目不分离的时代，可以考虑直接使用next框架来开发（狗头保命）。