跳到主要内容

配置

typescript​

  • 使用 next/link 时避免打字错误；
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
};

module.exports = nextConfig;

End-to-End Type Safety​

  • 服务端和客户端实现类型共享，实现类型安全；
async function getData() {
  const res = await fetch("https://api.example.com/...");
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

export default async function Page() {
  const name = await getData();

  return "...";
}

eslint​

{
  "extends": "next/core-web-vitals"
}

环境变量​

本地环境变量​

  • .env.local 文件；
  • 从 process.env 获取；
  • 仅服务端使用；
DB_HOST = localhost;
DB_USER = myuser;
DB_PASS = mypassword;
export async function GET() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  });
  // ...
}

浏览器环境变量​

  • 使用 NEXT_PUBLIC_前缀；
NEXT_PUBLIC_ANALYTICS_ID = abcdefghijk;

环境变量文件​

  • .env.local：最高优先级；
  • .env：所有环境；
  • .env.development：dev 环境；
  • .env.production：prod 环境；
  • .env.test：test 环境；

环境变量加载顺序​

  • process.env；
  • .env。$(NODE_ENV).local；
  • .env.local (Not checked when NODE_ENV is test。)；
  • .env。$(NODE_ENV)；
  • .env；

别名​

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}