NextJS 页面

NextJS 是一个轻量级的 React 框架，为开发高性能、生产级的 Web 应用程序提供了一些关键功能。它是 SSR（服务端渲染）应用程序的最佳选择，因为它使您可以选择在服务器上还是在客户端上呈现您的应用程序。这使得页面加载更快和 SEO 更加优化，并提供了更好的用户体验。

特点

1. 预渲染
2. 自动代码分割
3. 代码优化
4. 现代化浏览器支持
5. 内置 styled-jsx 样式支持
6. 具有热重载功能的开发环境

安装

使用 npm 安装命令行工具：

npm install -g create-next-app

创建一个新 Next.js 应用程序：

npx create-next-app my-app

页面数据获取

NextJS 提供的一个很有用的特性是允许您在页面加载之前获取数据。使用该功能可以为不同的页面加载不同的数据。这可以优化您的应用程序性能，并为您提供更好的可维护性。

export async function getStaticProps() {
  const res = await fetch('https://some-api.com/data');
  const data = await res.json();

  return { props: { data } };
}

返回的数据可以在页面组件中使用：

export default function MyPage({ data }) {
  return (
    <div>
      <h1>My Page</h1>
      <p>{data.someData}</p>
    </div>
  );
}

动态页面

您可以使用动态路由在 Next.js 中动态生成页面。每个带有中括号的参数都可以作为 context 对象的属性在 getStaticPaths 和 getStaticProps 中访问。

export async function getStaticPaths() {
  const res = await fetch('https://some-api.com/items');
  const items = await res.json();

  const paths = items.map((item) => ({
    params: { id: item.id },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://some-api.com/items/${params.id}`);
  const item = await res.json();

  return { props: { item } };
}

function Item({ item }) {
  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
    </div>
  );
}

export default Item;

预渲染

预渲染是将页面在生产环境中预处理为 HTML。这使得页面的初始加载速度更快，因为它不需要等待 JavaScript 加载和运行。预渲染有两种类型：静态生成和服务器端渲染。

import Link from 'next/link';

function Index({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Link href={`/item/${item.id}`}>
            <a>{item.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const res = await fetch(`https://some-api.com/items`);
  const items = await res.json();

  return { props: { items } };
}

export default Index;

CSS 模块

Next.js 内置了使用 CSS 模块的方式，这些模块可以通过使用简单的 CSS 文件来工作。只需将 CSS 文件命名为 [name].module.css，每个类名都会与文件名一起生成。

/* styles.module.css */
.title {
  font-size: 32px;
}
.description {
  color: #777;
}

import styles from './styles.module.css';

function Item({ item }) {
  return (
    <div>
      <h1 className={styles.title}>{item.title}</h1>
      <p className={styles.description}>{item.description}</p>
    </div>
  );
}

export default Item;

性能优化

Next.js 内置了许多功能，以帮助您优化应用程序的性能。例如，自动代码拆分可以显着减少首次加载时间。还有类似图片优化、客户端缓存和静态资源处理之类的功能可以使您的应用程序更快、更易于使用。

总结

Next.js 是一个强大的 React 框架，它可以帮助您轻松地构建像 SSR 和 SSG 这样的应用程序。它还提供了许多工具和功能，以帮助您轻松优化应用程序的性能。无论您是在构建新的应用程序还是将现有应用程序迁移到 Next.js，它都是一个不错的选择。