Nextjs了解内容

Next.js 是一个用于在服务端渲染 React 应用程序的框架，它提供了很多功能，如自动代码分割、自动静态优化、路由预加载等。

以下是一些 Next.js 的常用方法和概念：

1. 获取数据：Next.js 提供了两种方法获取数据，一种是通过 getInitialProps 方法，它可以在页面初始化时获取服务器端的数据，并渲染页面。另一种是通过 next/server 中的 fetch 方法，可以在客户端或服务器端使用。

import fetch from 'isomorphic-unfetch';
 
async function getData() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  return data;
}
 
export default async function Page() {
  const data = await getData();
  return <div>{data}</div>;
}

2. 静态导入：Next.js 支持静态导入，可以导入 JSON, CSS, CSS module, Images 等静态资源。

import Image from 'next/image';
import styles from './styles.module.css';
import data from './data.json';
 
function Home() {
  return (
    <div className={styles.container}>
      <Image src="/example.jpg" alt="example image" />
      <p>{data.text}</p>
    </div>
  );
}
 
export default Home;

3. 动态导入：Next.js 支持动态导入，可以根据需要按需加载页面或组件。

import dynamic from 'next/dynamic';
 
const DynamicComponent = dynamic(import('../components/component'), {
  ssr: false,
});
 
function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
    </div>
  );
}
 
export default Home;

4. 路由：Next.js 使用文件系统作为路由，每个页面的组件都是通过文件系统的路径来定义的。

// pages/about.js
function About() {
  return <div>About</div>;
}
 
export default About;

5. 自定义服务器：Next.js 允许你自定义服务器，可以用来配置自定义行为或集成现有的服务器。

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
 
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;
 
    if (pathname === '/a') {
      app.render(req, res, '/a', query);
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, () => {
    console.log('Running on http://localhost:3000');
  });
});

6. 导出静态页面：Next.js 支持导出静态页面，可以用于预渲染或生成静态站点。

// pages/index.js
function Home() {
  return <div>Home</div>;
}
 
export default