Next.js 12 新的中间件 api 将变量从中间件传递到页面

Question

问题的背景

Vercel 最近发布了他们对 Next.js 的最大更新。 Next.js blog。 他们引入了很多新功能，但我最喜欢的是Middleware：

"使您能够使用代码而不是配置。这为您提供了完整的 Next.js 的灵活性，因为您可以在请求之前运行代码 完全的。根据用户传入的请求，可以修改 通过重写、重定向、添加标头甚至流式传输来响应 HTML。”

问题

本题使用以下结构。

- /pages
    index.js
    signin.js
    - /app
      _middleware.js # Will run before everything inside /app folder
      index.js

这里的两个重要文件是/app/_middleware.js 和/app/index.js。

// /app/_middleware.js

import { NextResponse } from 'next/server';

export function middleware(req, event) {
  const res = { isSignedIn: true, session: { firstName: 'something', lastName: 'else' } }; // This "simulates" a response from an auth provider
  if (res.isSignedIn) {

    // Continue to /app/index.js
    return NextResponse.next();
  } else {

    // Redirect user
    return NextResponse.redirect('/signin');
  }
}

// /app/index.js

export default function Home() {
  return (
    <div>
      <h1>Authenticated!</h1>
      
      // session.firstName needs to be passed to this file from middleware
      <p>Hello, { session.firstName }</p>
    </div>
  );
}

在此示例中，/app/index.js 需要访问 res.session JSON 数据。是否可以在NextResponse.next() 函数中传递它，还是需要做其他事情？

快递可以res.locals.session = res.session

Answer 1

According to the examples（特别是/pages/_middleware.ts 和/lib/auth.ts）看起来这样做的规范方法是通过 cookie 设置您的身份验证。

在你的中间件函数中，它看起来像：

// /app/_middleware.js

import { NextResponse } from 'next/server';

export function middleware(req, event) {
  const res = { isSignedIn: true, session: { firstName: 'something', lastName: 'else' } }; // This "simulates" a response from an auth provider
  if (res.isSignedIn) {

    // Continue to /app/index.js
    return NextResponse.next().cookie("cookie_key", "cookie_value"); // <--- SET COOKIE
  } else {

    // Redirect user
    return NextResponse.redirect('/signin');
  }
}