NextJs 初级篇 - 安装 | 路由 | 中间件

于 2024-05-26 18:38:16 发布
阅读量1.1k 收藏 22
点赞数 14
文章标签： 中间件 NextJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zong_0915/article/details/139196679
版权

NextJs 初级篇 - 安装 | 路由 | 中间件

一. NextJs 的安装

首先，NextJs要想使用，node版本不能太低，最低也要18以上，版本不够的，可以用nvm来管理，Mac用户的安装可以参考这篇文章：
mac 系统正确安装nvm

版本满足的同学，建议直接使用脚手架来创建nextJs，输入脚手架命令（这里又切了阿里的镜像，以防万一关闭SSL认证）：

npm config set registry https://registry.npm.taobao.org
npm config set strict-ssl false
npx create-next-app@latest

结果如下：这里我们优先使用App Router（后面会讲解）
在这里插入图片描述
生成结果如下：
在这里插入图片描述
启动项目： npm run dev，之后访问：http://localhost:3000/ 即可

二. 路由

NextJs 拥有两套路由（两者兼容）：

  • Pages Router：在pages目录下创建对应的文件或者目录即是一个路由。
  • App Router：NextJs从版本13.4起的默认路由模式

为什么官方在新版本中，默认的路由模式采用了App呢？

  • pages 下每个文件都会被当成路由，不符合开发习惯
  • app 架构新增了布局（layout）、模版（template）、加载状态（loading）、错误处理（error）、404 等文件，为项目开发提供了一套规范。

2.1 路由和页面的定义

我们这里主要讲官方更推荐的AppRouter，如图：
在这里插入图片描述
这里简单介绍下：

  • 我们约定使用 page 来代表一个页面，就好比React中使用：index。和React一样，默认导出个组件即可。
  • 文件的路径就是对应的路由。
  • app/page.tsx 对应路由 /
  • app/about/page.tsx 对应路由 /about
  • app/address/page.tsx 对应路由 /address
  • 后缀名可以使用：.js、.jsx、.tsx

2.2 布局的定义和使用

首先布局组件有这么几个特征：

  • 定义一个布局，需要新建一个名称为：layout 的固定文件，该组件接收一个children，代表子页面或者子布局。
  • 布局可以嵌套，父布局中有一个子布局。

根布局还有额外几个特征：

  • 定义在app/layout.tsx文件中，会应用于所有的路由。并且此文件必须存在。
  • 根布局文件中必须包含html和body标签。同时其他布局不能包含这些标签。

根布局文件内容示例：

import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

布局的嵌套: address 下有个子目录home，每个文件都有自己的layout布局。
在这里插入图片描述
AddressLayout：

const AddressLayout = ({ children }: any) => {
    return (
        <>
            <nav>
            我是Address的Layout
            </nav>
            {children}
        </>
    )
}
export default AddressLayout

HomeLayout：

const HomeLayout = ({ children }: any) => {
    return (
        <>
            <nav>
            我是Home的Layout
            </nav>
            {children}
        </>
    )
}
export default HomeLayout

访问http://localhost:3000/address/home，呈现效果：
在这里插入图片描述

2.3 模板的定义和使用

模板跟布局的用法是一样的，例如我们在address下定义一个固定名称的模板文件：template.tsx

const AddressTemplate = ({ children }: any) => {
    return (
        <>
            <nav>
            我是Address的模板
            </nav>
            {children}
        </>
    )
}
export default AddressTemplate

此时我们访问 http://localhost:3000/address/home，呈现效果：在这里插入图片描述
这说明了：layout 会包裹 template，template 再包裹 page 。

那模板和布局之间，存在着什么差异？

① 模板 VS 布局

状态的维持：

  • 模板：路由切换的时候，模板的内容会随之变更。
  • 布局：路由切换的时候，布局的内容不会更改。

框架默认行为的更改：以组件Suspense为例，这个组件就是一个渲染fallback组件效果的功能。

  • 模板：模板内使用Suspense，每次切换路由的时候，都会展示fallback组件。
  • 布局：模板内使用Suspense，每次切换路由的时候，只会展示一次。

其实这两个点比较类似，说白了就是，每次在切换路由的时候，使用 template ，就可以重新触发渲染。

来个案例，目录结构如下：
在这里插入图片描述
sonA：

const SonA = () => {
    return <>
        我是SonA！！！
    </>
}
export default SonA

sonB：

const SonB = () => {
    return <>
        我是SonB！！！
    </>
}
export default SonB

父组件：page.tsx

import Link from "next/link";

const Parent = () => {
    return <>
        <nav>
            当前页面是父组件
        </nav>
        <nav>
            跳转到：<Link href='/parent/sonA'>SonA</Link>
        </nav>
        <nav>
            跳转到：<Link href='/parent/sonB'>SonB</Link>
        </nav>
    </>
}

export default Parent

template.tsx：

'use client'
import { useState } from "react"
const AddressTemplate = ({ children }: any) => {
    const [count, setCount] = useState<number>(0);
    return (
        <>
            <h1>Template点击次数: {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                点击
            </button>
            {children}
        </>
    )
}
export default AddressTemplate

layout.tsx：

'use client'
import { useState } from "react"
const ParentLayout = ({ children }: any) => {
    const [count, setCount] = useState<number>(0);
    return (
        <>
            <h1>Layout点击次数:  {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                点击
            </button>
            {children}
        </>
    )
}
export default ParentLayout

结果如下：

在这里插入图片描述

② 什么是 use client

'use client' 是一个指令，放置在文件的顶部（通常是模块的第一行）。它告诉 Nextjs 该模块应该在客户端环境中执行，而不是在服务器端。

备注：默认情况下，NextJs中的页面是由服务端渲染的，即SSR。

2.4 路由跳转的方式

在上述案例中，我们使用 Link 组件来完成路由的跳转。而NextJs中，一共支持3种路由跳转的方式：

  • Link 组件。
  • 使用钩子函数：useRouter
  • 使用 redirect 函数

第一种 Link 组件，是最为推荐的方式，例如上述案例中的代码。

<Link href='/parent/sonA'>SonA</Link>

除此之外，还可以更改默认的跳转行为：App Router 的默认行为是滚动到新路由的顶部。可以通过传参 scroll 为false改变。

<Link href='/parent/sonA' scroll={false}>SonA</Link>

第二种使用useRouter函数：

'use client'
import Link from "next/link";
import { useRouter } from 'next/navigation'

const Parent = () => {
    const router = useRouter();
    return <>
        <nav>
            当前页面是父组件
        </nav>
        <nav>
            跳转到：<Link href='/parent/sonA'>SonA</Link>
        </nav>
        <nav>
            跳转到：<button onClick={() => router.push('/parent/sonB')}>SonB</button>
        </nav>
    </>
}

export default Parent

我们还能发现，一旦使用钩子函数，这种客户端触发的动作，就需要加上标识'use client'，代表它是需要客户端渲染。

第三种：redirect，用于给服务端组件用的，伪代码如下：

import { redirect } from 'next/navigation'
 
async function login(id) {
  const res = await login()
  if (!res.ok) {
     redirect('/error')
  }
  return res.json()
}

2.5 动态路由

假设我们访问某个订单详情页，订单号可能是动态会变的，这里假设订单号是123456，一般我们可以设计两种URL：

  • /orderInfo/123456
  • /orderInfo?orderId=123456

先说第一种，就需要通过动态路由的方式来访问。NextJs中，需要将文件夹的名字用方括号[] 扩住。例如我们创建一个目录：orderInfo/[orderId]，代表orderId是一个动态路由，其中这个动态参数可以通过orderId字段来读取。
在这里插入图片描述
然后页面上我们希望把订单号展示出来。其中组件接收一个参数：params，如下：

import React from 'react'
const About = ({ params }: any) => {
    return <>
        <h1>订单详情页面</h1>
        <span>{params.orderId}</span>
    </>
}
export default About

那么在访问 http://localhost:3000/orderInfo/123 的时候，效果如下：
在这里插入图片描述

那如果我们动态参数后还跟着路由，例如 http://localhost:3000/orderInfo/123/shop 若直接访问我们看看结果：
在这里插入图片描述
我们发现此时404了，可见这种情况下，动态参数[orderId]只会接收第一个路由片段，那怎么办呢？我们可以将[orderId] 改为: [[..orderId]]，表示捕获所有后面所有的路由片段。
在这里插入图片描述
例如：
在这里插入图片描述

2.6 路由处理程序

NextJs中，对于客户端和服务端之间的API交互，叫做路由处理程序。

编写一个简单的路由处理程序，规则如下：

  • 接口的路径跟路由比较相似，对应文件目录下创建一个名为 route 的文件即可。
  • 文件中需要导出固定名称的函数（无需使用default export）GET、POST等。
  • 可以使用NextResponse代表返回的数据。
// route.js
export async function GET(request) {}
export async function HEAD(request) {}
export async function POST(request) {}
export async function PUT(request) {}
export async function DELETE(request) {}
export async function PATCH(request) {}
// 如果 `OPTIONS` 没有定义, Next.js 会自动实现 `OPTIONS`
export async function OPTIONS(request) {}

一个简单的GET和POST请求：
在这里插入图片描述
GET请求：

import { NextRequest, NextResponse } from 'next/server'

export async function GET() {
    const data = [{ id: 1, name: 'LJJ' }]
    return NextResponse.json({ data })
}

对应结果：
在这里插入图片描述
POST请求：

import { NextRequest, NextResponse } from 'next/server'
export async function POST(request: NextRequest) {
    const data = await request.json();
    return NextResponse.json(data)
}

对应结果：
在这里插入图片描述

① GET 请求的默认缓存机制

默认情况下，使用NextResponse对象的GET请求会被NextJs缓存起来。（本地模式下不会缓存，生产模式则会）

我们改一下我们的getUserList接口：

import { NextResponse } from 'next/server'

export async function GET() {
    const data = [{ id: 1, name: 'LJJ', date: new Date().getMilliseconds() }]
    return NextResponse.json({ data })
}

然后跑命令： npm run build & npm run start
我们能发现构建产物：/api/getUserList 是静态的。
在这里插入图片描述
我们请求接口发现：无论请求几遍，时间戳永远不会变，是因为被缓存了。
在这里插入图片描述

② 控制缓存或者退出缓存的手段

退出缓存的方式有这么几种：

  • GET 请求中使用了 Request 对象。例如：返回对象依赖于Request的参数。
  • 添加其他 HTTP 方法，比如同一个route文件中，同时定义了GET和POST函数。
  • 使用像 cookies、headers 这样的动态函数。
  • 也可以手动声明接口为动态模式。 文件顶端增加：export const dynamic = 'force-dynamic' 即可
// 返回结果依赖于request的参数
export async function GET(request: NextRequest) {
    const searchParams = request.nextUrl.searchParams
    const data = [{ id: 1, name: searchParams.toString(), date: new Date().getMilliseconds() }]
    return NextResponse.json({ data })
}
// 使用cookies这种动态函数
export async function GET(request) {
  const token = request.cookies.get('token')
  return Response.json({ data: new Date().toLocaleTimeString() })
}

③ 控制缓存的时效 revalidate

我们可以在route文件的顶部增加声明，例如以下就是标识缓存的有效期为10秒。

export const revalidate = 10

④ 常见的编写问题

首先是：获取URL上的参数、获取Header、获取Request请求体（JSON）、Cookie等

import { NextRequest, NextResponse } from 'next/server'
export async function POST(request: NextRequest) {
    // 获取URL上的参数
    const searchParams = request.nextUrl.searchParams
    console.log(searchParams.get('orderId'));
    // 处理 Header
    const headersList = new Headers(request.headers)
    const referer = headersList.get('myHeader')
    console.log(referer)
    // 获取Request请求体 （JSON)
    const data = await request.json();
    // 如果是FormData
    // const formData = await request.formData()
    // const name = formData.get('name')
  
    return NextResponse.json(data)
}

Postman请求：http://localhost:3000/api/getDetail?orderId=123
在这里插入图片描述
结果如下：
在这里插入图片描述

重定向：使用redirect即可。

import { redirect } from 'next/navigation'

export async function POST(request: NextRequest) {
    redirect('https://www.baidu.com')
}

获取Cookie、并设置到Response中，则需要返回一个使用 Set-Cookie header 的 Response 实例

import { cookies } from 'next/headers'
 
export async function POST() {
  const cookieStore = cookies()
  const token = cookieStore.get('test')
  console.log(token)
 
  return new Response('OK', {
    status: 200,
    headers: { 'Set-Cookie': `myNewToken=${12312312312}` },
  })
}

请求后：
在这里插入图片描述

3. 中间件

NextJs 中，中间件的定义，可以在根目录中定义一个固定名称的文件：middleware.ts，它的内容有两个部分组成：

// middleware.js
import { NextResponse } from 'next/server'
 
// 第一部分：导出固定名称的中间件
export function middleware(request) {
  // ... 中间件逻辑
}
// 第二部分：设置匹配路径
export const config = {
    matcher: '/api/:path*',
}

这里直接给个案例，假设我中间件有多个功能：

  • 中间件 headers：处理相关的Header
  • 中间件 logging：记录相关的日志

我们可以在根目录下创建个专门编写中间件的文件夹：middlewares
在这里插入图片描述
两个中间件内容：

// logging.ts
import { NextRequest } from "next/server";
export const logging = (next: any) => {
    return async (request: NextRequest) => {
        // ...
        console.log('logging')
        return next(request);
    };
};
// headers.ts
import { NextRequest } from "next/server";
export const headers = (next: any) => {
    return async (request: NextRequest) => {
        console.log('headers')
        return next(request);
    };
};

然后我们可以设置下别名，tsconfig.json 文件中：
在这里插入图片描述
这样就可以在真正设置中间件的地方（根路径的middleware.ts中）进行设置：

import { logging } from "@/middlewares/logging";
import { headers } from "@/middlewares/headers";
import { NextResponse } from "next/server";

function chain(functions: any, index = 0) {
    const current = functions[index];
    if (current) {
        const next: any = chain(functions, index + 1);
        return current(next);
    }
    return () => NextResponse.next();
}

export default chain([logging, headers]);

export const config = {
    matcher: '/api/:path*',
}

这样访问任何一个接口，都会走相关的逻辑了。
在这里插入图片描述

Zong_0915
关注
  • 14
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
next. js_如何安装Next.js
cuk0051的博客
08-28 1998
next. jsTo install Next.js, you need to have Node.js installed. 要安装Next.js，你需要有Node.js的安装。 Make sure that you have the latest version of Node. Check with running node -v in your terminal, and compa...
Next.js API中间件-JavaScript开发
05-26
Next.js API路由是将后端功能添加到React应用程序的一种非常有趣且简单的方法。 但是，当需要添加中间件时，没有简单的方法来实现它。 Next.js API中间件简介Next.js API路由是将后端功能添加到React应用程序的一种非常有趣且简单的方法。 但是，当需要添加中间件时，没有简单的方法来实现它。 Next.js官方文档建议在API路由处理程序inside中编写函数。 与Express.js或Koa.js提供的干净API相比，这是一大步。 该库试图提供最小，干净，可组合的中间件模式
next.js 安装简易教程
大IT职男日志
09-04 2874
next.js服务端渲染讲真，坑是真不少。 我们这里结合antd构建简单服务端运用。咱们这里只讲最简单的构建步骤，复杂场景请看官网。咱们要是就是快。 next官网文档：http://nextjs.frontendx.cn/ 1. 安装脚手架 create-next-app 是next的脚手架会为你搭建好最基本的next框架。 构建步骤 yarn global add create-next-app create-next-app my-project cd my-project yar...
NextJs教程系列(一)：介绍&安装
崔颢的博客
03-05 558
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React 组件来构建用户界面，并使用 Next.js 来构建其他功能和优化。
next.js博客搭建_初始化next项目（第一步）
热门推荐
编程知识分享，主打前端
05-03 3万+
大家好，我是yma16，本期给大家分享next项目搭建博客的开始。背景因为我的博客网站是基于vue2搭建的，单页面应用，技术框架老旧，所以想着给我的博客网站升级.
poc-nextjs-strapi-headless-blog:概念验证-无头博客| Next.js Strapi
05-10
本项目"poc-nextjs-strapi-headless-blog"就是一个概念验证，展示了如何使用 Next.js 和 Strapi 构建一个无头博客系统。 Next.js 是一个由 Vercel 开发的开源 JavaScript 框架，专为服务器渲染（SSR）和静态生成...
nextjs-9-动态路由演示
02-22
这是一个用引导的项目。 入门 首先，运行开发服务器： npm run dev # or yarn dev 使用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 当您编辑文件时，页面会自动更新。...
nextjs-react-redux-hook
02-18
在"nextjs-react-redux-hook"项目中，我们将探讨如何将这些技术有效地结合在一起，创建一个高效、可维护的前端应用。 1. **Next.js的使用** - **服务器端渲染（SSR）**：Next.js的核心特性之一是支持SSR，这可以...
nextjs-msw-example:nextjs-msw-example
05-07
【标题】：“nextjs-msw-example:nextjs-msw-example” 【描述】：“nextjs-msw-example 是一个示例项目，展示了如何在 Next.js 应用中集成 Mock Service Worker (MSW)。Next.js 是一个基于 React 的服务器渲染框架...
nextjs-jwt-example:next.js授权示例，包括专用路由保护
05-06
包含私有路由保护的Next.js授权示例 git clone git@github.com:jasonraimondi/nextjs-jwt-example.git cd nextjs-jwt-example go run ./api/main.go ____ __ / __/___/ / ___ / _// __/ _ \/ _ \ /___/ \_ _/_//_...
Next.js项目部署到Windows环境
凌光信息技术
01-27 1043
本文介绍如何将Next.js项目部署到IIS创建的网站。
Next.js 入门简介
终生学习，终生成长
03-19 2471
总结来说，Next.js 是一个简单易用的服务端渲染框架，它可以提高 React 应用程序的性能、可扩展性和易用性。Next.js 是一款基于 React 框架的轻量级服务端渲染框架，它在 React 基础上提供了一些额外的功能，如静态页面生成和服务器端渲染。你可以将这个应用程序部署到你的服务器上，以便用户可以访问你的网站。最后，你可以使用 Next.js 的构建工具将你的应用程序部署到生产环境中。接下来，你可以在页面组件中使用 Next.js 提供的一些特殊的生命周期方法，如。文件将会作为网站的主页，
Next.js 中的中间件
qq_42880714的博客
12-07 904
Next.js 中的中间件
Next.js 开发指南 路由篇 | 路由处理程序和中间件
sybh的博客
02-18 1454
路由处理程序是指使用 Web Request和 ResponseAPI 对于给定的路由自定义处理逻辑。通俗的理解就是我们常说的“写接口”，用于实现前后端交互。本篇我们会讲解如何定义一个路由处理程序以及写路由处理程序时常遇到的一些问题。写路由处理程序，你需要定义一个名为route.js的特殊文件。（注意是route不是router该文件必须在app目录下（对应 Pages Router 下的 API Router），可以在app嵌套的文件夹下，类似于page.js和layout.js。但是要注意。
Next.js 学习笔记（一）——安装
Jackson_Mseven的博客
12-16 711
如果你更喜欢使用 Pages Router 而不是 App Router，你可以在项目的根目录中创建页。启动一个新的 Next.js 应用程序，该应用程序会自动为你设置所有内容。Next.js 使用文件系统路由，这意味着应用程序中的路由由文件的结构决定。该路由器允许你使用 React 的最新功能，是基于社区反馈的。将使用你的项目名称创建一个文件夹，并安装所需的依赖项。需要知道：虽然你可以在同一个项目中使用多个路由器，但。我们建议你在新项目中只使用一个路由器，以避免混淆。文件，以控制来自服务器的初始响应。
官网《Next.js —— 起步》
ab110911的博客
10-16 2682
一、开始 目前对于创建一个JavaScript单页应用是个挑战这个事实已经不再是一个秘密。幸运的是，总有一些简单易用的东西能够帮助你更快的构建应用 ‘创建应用-https://github.com/facebook/create-react-app’是个非常棒的例子！ 即便如此，在你创建一个一般的应用来说依旧有较高的学习曲线。 所以，我们需要一个简单且可定制的东西。 想一想，我们是如何用...
初始Next.js
最新发布
shmilynn_的博客
04-17 359
本系列next.js基于的是目前最新版本的 v14 版本，需要。最快捷的创建 Next.js 项目的方式是使用。
NextJS基础教程，web开发服务器
2301_76379462的博客
04-04 1075
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。名，这样就防止了CSS的全局污染。比如我们把代码写成下面这样，然后在浏览器的控制台中进行查看，你会发现自动给我们加入了类名，类似。return (kaikaikai动态显示样式Next.js使用了Style jsx,所以定义动态的CSS样式就非常简单，比如现在要作一个按钮，点击一下，字体颜色就由蓝色变成了红色。下面是实现代码。
在gateway服务的application.yml文件中，配置各个微服务的路由信息 要求如下： | 路径 | 目标微服务 | | ---------------------- | ------------- | | `/item/**` | itemservice | | `/user/**,/address/**` | userservice | | `/order/**,/pay/**` | orderservi
05-26
ce, payservice | 您可以在gateway服务的application.yml文件中添加以下内容： ``` spring: cloud: gateway: routes: - id: itemservice_route uri: lb://itemservice predicates: - Path=/item/** - id: userservice_route uri: lb://userservice predicates: - Path=/user/** - Path=/address/** - id: orderservice_route uri: lb://orderservice predicates: - Path=/order/** - id: payservice_route uri: lb://payservice predicates: - Path=/pay/** ``` 上述配置将会把请求路径以`/item/**`开头的请求路由到`itemservice`微服务，把请求路径以`/user/**`或`/address/**`开头的请求路由到`userservice`微服务，把请求路径以`/order/**`开头的请求路由到`orderservice`微服务，把请求路径以`/pay/**`开头的请求路由到`payservice`微服务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zong_0915

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值