Next.js组件：React.FC与NextPage的区别及选型建议

一、核心区别 #

1. 定位与适用范围 #

• React.FC是React官方提供的通用类型，用于标记所有React项目中的函数组件，只关注组件自身的Props和React内置属性（比如children），和Next.js框架无关。
• NextPage是Next.js专为页面组件扩展的类型，在React.FC的基础上，额外兼容Next.js页面特有的配置项与数据获取逻辑。

2. 类型结构差异 #

NextPage会自动关联Next.js页面专属的功能类型，比如数据获取函数的返回值与组件Props的绑定：

import type { NextPage } from 'next';
import React from 'react';

type HomeProps = {
  articleTitle: string;
};

const Home: NextPage<HomeProps> = ({ articleTitle }) => {
  return <h1>{articleTitle}</h1>;
};

// getStaticProps的返回props会自动匹配HomeProps的类型
export const getStaticProps = async () => {
  return {
    props: {
      articleTitle: 'Next.js 页面类型详解',
    },
  };
};

export default Home;

如果用React.FC，无法在类型层面自动关联这些Next.js专属逻辑，需要手动处理类型，容易出现不匹配的问题。

3. Next.js特性支持 #

• React.FC不包含任何Next.js特有的类型定义，当你给页面组件添加layout、notFound这类页面级配置时，类型系统不会提供校验和提示。
• NextPage天生支持这些Next.js页面配置的类型校验，比如：

import type { NextPage } from 'next';
import MainLayout from '../components/MainLayout';

const About: NextPage = () => {
  return <div>关于我们</div>;
};

// NextPage会自动校验layout的类型是否合法
About.layout = MainLayout;

export default About;

二、Next.js项目规范选型 #

1. 页面组件（pages/app目录下的页面）：优先用NextPage
   页面是Next.js的核心载体，用NextPage能充分利用框架的类型校验和自动提示，避免页面配置、数据获取环节的类型错误，也符合Next.js官方推荐的实践。
   注意：Next.js 13+的App Router中，官方更推荐直接让TypeScript自动推导组件类型，或者用React.FC，但如果需要兼容Pages Router的写法，NextPage依然可用。

2. 通用组件（Layout、Button等非页面组件）：用React.FC或直接推导类型
   这类组件不涉及Next.js页面专属功能，用React.FC能保证通用性；也可以选择不指定组件类型，让TypeScript自动推导（现在TS对React组件的类型推导已经很完善），比如：

type CardProps = {
  title: string;
  content: string;
};

// 无需React.FC，TS自动推导组件类型
const Card = ({ title, content }: CardProps) => {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
};

export default Card;

3. 特殊场景：尽量区分组件职责
   很少需要让一个组件同时兼任通用组件和页面组件，若真有需求，可以同时指定两种类型：React.FC<Props> & NextPage<Props>，但不推荐这种模糊职责的写法。

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