NextJS Quick Start

What is Next.js?

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

Custom App

Next.js uses the App component to initialize pages. You can override it and control the page initialization and:

Create a shared layout between page changes

Inject additional data into pages

Add global CSS

Custom Document

A custom Document can update the <html> and <body> tags used to render a Page.

我理解主要作用是做SEO优化比较有用

Pages Router Rendered mode

Next.js 提供了多种方法来实现不同的渲染方式。以下是一些基本的示例代码，展示如何实现服务器端渲染（SSR）、静态网站生成（SSG）、客户端渲染（CSR）：

1. 服务器端渲染（SSR）

服务器端渲染可以通过 getServerSideProps 函数实现。这个函数在每次页面请求时都会运行，并在服务器上生成页面所需的数据。


// pages/about.js
export async function getServerSideProps(context) {
  // 获取数据
  const data = await fetchData();
  return { props: { data } };
}

function AboutPage({ data }) {
  return (
    <div>
      <h1>About Page</h1>
      <p>{data}</p>
    </div>
  );
}

export default AboutPage;

2. 静态网站生成（SSG）

静态网站生成使用 getStaticProps 函数。这个函数仅在构建时运行一次，生成静态的 HTML 文件，适用于内容不经常变化的页面。


// pages/blog.js
export async function getStaticProps() {
  // 获取数据
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 3600, // 重新验证时间（秒）
  };
}

function Blog({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Blog;

3. 客户端渲染（CSR）

客户端渲染不需要特殊的 Next.js 函数。页面组件会在浏览器中加载和渲染，通常用于需要用户交互或实时更新的页面。


// pages/index.js
function HomePage() {
  // 客户端渲染的数据获取和状态管理
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const response = await fetch('/api/data');
      const newData = await response.json();
      setData(newData);
    }

    loadData();
  }, []); // 空依赖数组意味着这个 effect 只在组件挂载时运行一次

  return (
    <div>
      <h1>Home Page</h1>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default HomePage;

4. 自动静态优化（ASO）

自动静态优化是 Next.js 的一个特性，它根据页面的访问模式自动选择使用 SSR 或 SSG。如果页面被频繁访问，Next.js 会将其转换为 SSG 以提高性能。


// pages/products.js
export const getStaticProps = async () => {
  // 这里可以放置获取数据的逻辑
  const products = await fetchProducts();
  return {
    props: { products },
    // 可以设置 revalidate 来控制重新验证的时间
    revalidate: 60 * 60, // 1 hour
  };
};

function ProductsPage({ products }) {
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ProductsPage;

在自动静态优化中，revalidate 属性用于控制多久后重新生成页面，以确保内容的新鲜度。

Nextjs的联邦模块


const nextConfig = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'chatgptNext',
        filename: 'static/chunks/remoteEntry.js',
        remotes: remotes(isServer),
        exposes: {
          './chat': './src/remotes/remote-chat.tsx',
          './sidebar': './src/remotes/remote-sidebar.tsx',
        },
        shared: {
          '@mui/icons-material': {
            singleton: true,
          },
          '@mui/material': {
            singleton: true,
          },
        },
        extraOptions:{
          automaticAsyncBoundary: true
        }
      })
    );
    // ...
    return config;
  },
}

在 Next.js 应用中使用模块联邦（Module Federation）时，remotes 配置可能需要根据不同的 isServer 值返回不同的配置，这主要是由于以下几个原因：

环境差异：服务器端渲染（SSR）和客户端渲染有不同的运行环境。服务器端通常在 Node.js 环境中执行，而客户端在浏览器环境中执行。这可能导致某些资源的引用路径或可用性不同。

静态资源路径：在服务器端，静态资源（如远程入口文件 remoteEntry.js）可能需要通过不同的路径来访问，因为服务器端可能没有访问浏览器端 _next 目录的权限。

服务端与客户端的构建差异：Next.js 在服务端构建时会生成适合服务器执行的代码，而在客户端构建时会生成适合浏览器执行的代码。因此，remotes 配置可能需要根据构建目标来调整。

跨域问题：在开发过程中，服务器端和客户端可能部署在不同的域名或端口上，这可能导致跨域请求问题。remotes 配置可以根据 isServer 的值来指定正确的 URL，以避免或解决跨域问题。

性能优化：在服务器端和客户端使用不同的资源路径或配置可以优化加载性能。例如，服务器端可能不需要加载某些客户端特定的资源。

条件资源加载：在某些情况下，可能需要根据是否是服务器端渲染来条件性地加载某些资源或模块，remotes 配置允许开发者根据 isServer 的值来实现这种条件性加载。

通过根据 isServer 返回不同的配置，开发者可以确保模块联邦在不同的运行环境中都能正确地工作，同时优化应用的性能和资源加载策略。