从/重定向到另一个页面的Next.js重定向

我已经在我的Next.JS应用程序中实现了这个功能，通过定义一个根页面，在服务器端和客户端进行重定向。以下是根页面的代码：

import { useEffect } from "react";
import Router from "next/router";

const redirectTo = "/hello-nextjs";

const RootPage = () => {
  useEffect(() => Router.push(redirectTo));
  return null;
};
RootPage.getInitialProps = (ctx) => {
  if (ctx.req) {
    ctx.res.writeHead(302, { Location: redirectTo });
    ctx.res.end();
  }
};

export default RootPage;

‍♂️ useEffect 会重定向但立即跳回当前页面。

✅ useLayoutEffect 非常有效：

const router = useRouter();

useLayoutEffect(() => {
  router.isFallback && router.replace("/course");
}, [router]);

ℹ️ 我已经在上面的代码中使用了相同的 useEffect。

enum ERoutes {
  HOME = '/',
  ABOUT = '/about',
  CONTACT = '/contact'
}

import React from 'react';
import { NextPage } from 'next';
import { useDispatch } from 'react-redux';
import { useRouter } from 'next/router';

const Error: NextPage = () => {
    const { asPath, push } = useRouter();
    const dispatch = useDispatch();

    React.useEffect(() => {
        const routeValid = Object.values(ERoutes).includes(asPath);

        if (routeValid) {
          // do some stuff, such as assigning redux state to then render SPA content in your index page
        } else {
          // you can either continue to render this _error component, or redirect to your index page,
          // where you may have your own error component that is displayed based on your app state.
          // In my case, I always redirect to '/' (as you can see below, where I push('/'), but before doing so,
          // I dispatch relevant redux actions based on the situation
        }

        // I redirect to root always, but you can redirect only if routeValid === true
        push('/');
    }, []);

    return (
        <div>Error because '{asPath}' does not exist</div>
    );
};

export default Error;

这是对我有效的方法。使用禁用appDir的Next.js >= 13.2。

如果您想要重定向和改变URL（即浏览器从/ -> /hello-nextjs）。创建一个名为middleware.ts（或middleware.js）的文件，并将其放置在pages目录所在的文件夹中。例如，我的页面位于/src/pages，因此我们将得到/src/middleware.ts。

export default async function middleware(req: NextRequest) {
    const { pathname } = req.nextUrl;
    if (pathname === "/") {
        // Redirect from /-> /hello-nextjs
        return NextResponse.redirect(new URL("/hello-nextjs", req.nextUrl));
    }
    return NextResponse.next();
}

注意事项：

1. 相对URL在Next.js >=13.2中不起作用，因此我们需要像上面看到的那样改变现有的URL。（来源：middleware-relative-urls）
2. 如果您不介意URL保持不变，但仍然重定向（即/重定向到/hello-nextjs，但浏览器URL仍为/），则可以使用NextResponse.rewrite()而不是NextResponse.redirect()。

重定向 从Next.js 9.5开始，您现在可以在next.config.js文件中的redirects键下创建重定向列表：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ];
  },
};

Ofiicial Docs

您可以设置基本路径。Next Js 允许您这样做。例如，要使用 /login 而不是 /（默认值），请打开 next.config.js 并添加 basePath 配置：

  const nextConfig = {
  basePath: "/login",
};

module.exports = nextConfig;

你也可以在这里查看他们的文档 https://nextjs.org/docs/api-reference/next.config.js/basepath

这里是中间件解决方案，可以避免出现“URL格式错误，请仅使用绝对URL”的错误。

此外，使用路径对象可能是处理重定向的更清晰的方式。

// pages/_middleware.ts

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

export async function middleware(req: NextRequest) {
  const { pathname, origin } = req.nextUrl;

  const paths: { [key: string]: string } = {
    '/admin/appearance': `${origin}/admin/appearance/theme`,
  };

  const rePath = paths[pathname];
  if (rePath) return NextResponse.redirect(rePath);
  else return NextResponse.next();
}

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const Home = () => {
  const router = useRouter();

  useEffect(() => {
    // Check if the current path is "/"
    if (router.pathname === "/") {
      // Redirect to "/hello-nextjs"
      router.push("/hello-nextjs");
    }
  }, [router]);

  return (
    <div>
      {/* Your home page content goes here */}
    </div>
  );
};
export default Home;

import Link from "next/link";

const Header = () => {

    return (
        <div>
            <nav>
                <ul>
                    <li> <Link href='/home'>Home </Link></li>
                    <li> <Link href='/about'>About </Link></li>
                    <li> <Link href='/contact'>Contact US </Link></li>
                </ul>
            </nav>
        </div>
    );
};
export default Header;