• next.js极速入门

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

    前置条件：

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

    话不多说，直接上才艺：

    拉脚手架

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

    启动
    npm run/pnpm/yarn dev

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    目录结构
    在这里插入图片描述
    .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'

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    通过js跳转

    import { useRouter } from 'next/router'

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

    • 1
    • 2

    输出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';

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

    • 1
    • 2
    • 3
    • 4
    • 5

    此时页面的标题就是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框架来开发（狗头保命）。

    在这里插入图片描述

    附一个写的demo：github地址； 线上预览（国内现在访问vercel部署项目需要翻墙了）vercel部署地址
    以及官网文档地址

  • 相关阅读:
    腾讯云域名API解析升级版本（通过Java实现）腾讯云动态公网IP绑定域名实现内网服务器公网穿透
    深信服安全GPT 2.0升级，开启安全运营“智能驾驶”旅程
    垂直行业大模型“封神”背后，AI数据服务走入“深水区”
    AIGC Midjourney 指令生成高清图像及参数提示词
    50个常用的Numpy函数解释，参数和使用示例
    【最详细】最新最全Redis面试大全（50道）
    【毕业设计源码】基于Python的校园生活助手（二手+活动+论坛+新闻）信息系统
    瀑布流布局（CSS flex实现）
    图解机器学习 | 降维算法详解
    【STL编程】【竞赛常用】【part 1】
  • 原文地址：https://blog.csdn.net/ZhuAiQuan/article/details/127669687