React 和 Next.js 的基础知识对比

React 和 Next.js 是两个非常流行的前端开发工具，它们在文件命名、路由管理、渲染方式、代码组织层次以及错误处理等方面存在一些关键差异。下面我们将通过简单的表达方式来介绍这些差异，并提供一些示例代码和案例，让大家更容易理解。

1. 文件命名和组织结构

React

文件命名 ：通常使用 kebab-case （例如 my-component.tsx），组件名使用 PascalCase （例如 MyComponent）。
组织结构 ：根据功能模块划分，如 components、containers 等。

Next.js

文件命名 ：在 pages 目录下，文件名直接对应路由路径（例如 index.tsx 对应 / 路由）。
组织结构 ：包括 app、pages、public 等标准化目录。

示例：

typescript 复制代码

// React
// components/my-component.tsx
import React from 'react';

function MyComponent() {
  return Hello World!;
}

export default MyComponent;

// Next.js
// pages/index.tsx
import Head from 'next/head';

function HomePage() {
  return (
    
      
        Home Page
      
      Welcome to Home Page
    
  );
}

export default HomePage;

2. 路由管理

React

路由管理 ：需要额外引入 React Router 等库来处理路由。

Next.js

路由管理：内置路由管理功能，通过文件系统自动映射路由。

示例：

typescript 复制代码

// React (使用 React Router)
import { BrowserRouter, Route, Link } from 'react-router-dom';

function App() {
  return (
    
      
        Home
        
      
    
  );
}

// Next.js
// pages/about.tsx
function AboutPage() {
  return About Page;
}

export default AboutPage;

3. 渲染方式

React

渲染方式：默认使用客户端渲染（CSR），需要额外配置才能实现服务器端渲染（SSR）。

Next.js

渲染方式：支持服务器端渲染（SSR）、静态站点生成（SSG）和增量静态再生（ISR）。

示例：

typescript 复制代码

// React (CSR)
import React from 'react';

function App() {
  return Hello World!;
}

// Next.js (SSR)
import { GetServerSideProps } from 'next';

function HomePage({ data }) {
  return {data.title};
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
};

4. 代码组织层次

React

代码组织：通常根据功能或组件进行组织，没有特定的层次结构约定。

Next.js

代码组织 ：通常遵循特定的层次结构，如 app、components、services 等目录。

示例：

typescript 复制代码

// React
// components/
//   MyComponent.tsx
// containers/
//   MyContainer.tsx

// Next.js
// app/
//   dashboard/
//     page.tsx
// components/
//   MyComponent.tsx

5. 错误处理

React

错误处理：需要手动实现错误边界（Error Boundary）等功能。

Next.js

错误处理 ：提供了内置的错误处理机制，包括使用 ErrorBoundary 组件来捕获和处理错误。

示例：

typescript 复制代码

// React
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return Something went wrong.;
    }

    return this.props.children;
  }
}

// Next.js
// pages/_app.tsx
import ErrorBoundary from 'next/error';

function MyApp({ Component, pageProps }) {
  return (
    
      
    
  );
}

综上所述，Next.js 提供了一个更为完整的应用框架，包括路由、渲染方式、错误处理等方面的支持，而 React 则更为灵活，需要额外的库和配置来实现类似的功能。