如何仅在生产环境启用NextJS受保护路由，本地开发时忽略限制？

一、利用环境变量自动区分环境 #

NextJS会自动设置NODE_ENV环境变量——开发时为development，生产时为production，无需手动配置，我们可以基于这个变量做逻辑分支。

二、Pages Router 下的路由保护组件 #

创建一个通用的保护组件，根据环境判断是否校验登录状态：

// components/ProtectedRoute.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { isUserLoggedIn } from '../utils/auth'; // 替换成你自己实现的登录状态校验函数

export default function ProtectedRoute({ children }) {
  const router = useRouter();

  useEffect(() => {
    // 仅在生产环境校验登录状态
    if (process.env.NODE_ENV === 'production') {
      if (!isUserLoggedIn()) {
        router.push('/login');
      }
    }
    // 开发环境直接跳过校验，不做任何跳转
  }, [router]);

  return children;
}

在需要保护的页面里直接用这个组件包裹内容：

// pages/dashboard.js
import ProtectedRoute from '../components/ProtectedRoute';

export default function Dashboard() {
  return (
    <ProtectedRoute>
      {/* 你的页面内容 */}
    </ProtectedRoute>
  );
}

三、App Router 下的中间件方案（NextJS 13+） #

如果用App Router，直接在middleware.js里实现环境判断的路由保护：

// middleware.js
import { NextResponse } from 'next/server';
import { isUserLoggedIn } from './utils/auth'; // 替换成你自己的登录校验逻辑

export function middleware(request) {
  // 只在生产环境执行登录校验
  if (process.env.NODE_ENV === 'production') {
    const isLoggedIn = isUserLoggedIn();
    // 对指定路由做保护，这里以/dashboard为例
    if (!isLoggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  // 开发环境直接放行所有请求
  return NextResponse.next();
}

// 配置需要保护的路由规则
export const config = {
  matcher: ['/dashboard/:path*'],
};

四、彻底解决忘记修改配置的问题 #

上面的方案完全基于环境变量自动适配逻辑，不管是本地开发npm run dev还是部署生产npm run build && npm start，都会自动切换路由保护状态——再也不用手动注释/取消注释代码，从根源上避免遗漏。

额外：社交登录本地开发的临时适配 #

针对部分登录提供商不允许localhost作为重定向地址的问题，给两个临时解决办法：

• 修改本地hosts文件，把localhost映射成自定义域名（比如myapp.local），然后在登录提供商后台配置这个域名作为重定向地址
• 用ngrok这类工具把本地服务暴露成公网地址，用这个公网地址配置重定向

内容的提问来源于stack exchange，提问作者user3786924