NextJS 13 如何限制特定文件仅可在服务器端访问？

核心方案：利用Next.js的文件命名约定 + 环境检查 #

Next.js 13的App Router提供了明确的服务器/客户端模块区分机制，你可以通过以下方式确保特定文件仅在服务器端加载：

1. 用.server.ts后缀标记服务器专属文件

Next.js 会自动识别带有.server.ts（或.server.js）后缀的文件为仅服务器端模块，不会将其打包到客户端代码中。

• 创建服务器端常量文件：constants.server.ts

  // constants.server.ts
  // 可选：添加客户端环境检查，防止误导入
  if (typeof window !== 'undefined') {
    throw new Error('此文件仅允许服务器端访问');
  }
  
  // 定义服务器专属常量
  export const SERVER_CONSTANTS = {
    INTERNAL_SERVICE_URL: 'https://internal-api.example.com',
    ADMIN_ROLE_ID: 'admin_123',
    // 这里可以放不需要暴露给客户端的业务常量
  };
  

• 创建客户端常量文件：constants.client.ts

  // constants.client.ts
  // 定义客户端可访问的常量（如UI配置、公开枚举值）
  export const CLIENT_CONSTANTS = {
    PRIMARY_COLOR: '#2563eb',
    MAX_UPLOAD_SIZE: 5 * 1024 * 1024, // 5MB
    PUBLIC_API_ENDPOINT: 'https://api.example.com/public'
  };
  

2. 在服务器端代码中安全导入

服务器端的route.ts、服务器组件（无'use client'指令的组件）可以直接导入constants.server.ts，完全不会有客户端泄露风险：

// app/api/[id]/route.ts
import { SERVER_CONSTANTS } from '@/constants.server';

export async function GET(request: Request) {
  // 使用服务器常量
  const response = await fetch(`${SERVER_CONSTANTS.INTERNAL_SERVICE_URL}/data`);
  // ...后续逻辑
}

3. 防止客户端误导入的保障

• 如果你在客户端组件（带有'use client'）中尝试导入.server.ts文件，Next.js会在构建阶段直接抛出错误，阻止代码打包。
• 配合TypeScript路径别名（可选），可以更清晰地区分服务器/客户端常量：
  在tsconfig.json中添加：

  {
    "compilerOptions": {
      "paths": {
        "@/server-constants": ["./constants.server.ts"],
        "@/client-constants": ["./constants.client.ts"]
      }
    }
  }
  

  导入时就不会混淆：

  // 服务器端代码
  import { SERVER_CONSTANTS } from '@/server-constants';
  // 客户端代码
  import { CLIENT_CONSTANTS } from '@/client-constants';
  

关键说明 #

• .server.ts后缀是Next.js官方推荐的仅服务器端模块命名方式，框架会自动处理打包逻辑，确保这类文件不会出现在客户端bundle中。
• 你无需担心服务器常量被客户端获取，哪怕是通过开发者工具也无法看到这些文件的内容。
• 这种方式和.env.local互补，你可以继续用环境变量存API密钥，用.server.ts存业务逻辑相关的服务器常量。

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