探索高级 React：释放 Nextjs 的力量-js教程-PHP中文网

探索高级 React：释放 Nextjs 的力量

WBOY

发布： 2024-08-16 17:21:10

转载

643人浏览过

在不断发展的网络开发世界中，保持领先地位至关重要。 next.js 是一个强大的 react 框架，它彻底改变了我们构建现代 web 应用程序的方式。让我们通过实际示例深入探讨 next.js 的特殊之处以及它如何增强您的开发过程。

什么是 next.js？

next.js 是 vercel 开发的 react 框架，旨在使服务器端渲染和静态站点生成变得轻而易举。它通过旨在提高性能和 seo 的强大功能增强了 react。

为什么选择 next.js？

探索高级 React：释放 Nextjs 的力量

next.js 提供了几个引人注目的功能：

服务器端渲染（ssr）
静态站点生成（ssg）
api 路由

让我们通过示例深入探讨这些功能。

next.js 的核心特性

1. 基于文件的路由

next.js 使用直观的基于文件的路由系统。页面在pages目录中创建，文件名直接映射到路由。

示例：

// pages/about.js
export default function about() {
  return <h1>about us</h1>
}

登录后复制

这个文件会自动在/about创建一条路线。

2. 服务端渲染（ssr）

ssr是使用getserversideprops函数实现的。

示例：

// pages/ssr-example.js
export async function getserversideprops() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { props: { data } }
}

export default function ssrpage({ data }) {
  return <div>server-side rendered data: {data.title}</div>
}

登录后复制

此页面将根据每个请求获取数据，确保内容新鲜

3. 静态站点生成（ssg）

对于静态内容，使用getstaticprops。

示例：

// pages/ssg-example.js
export async function getstaticprops() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60 // regenerate page every 60 seconds
  }
}

export default function ssgpage({ data }) {
  return <div>static data: {data.content}</div>
}

登录后复制

此页面将在构建时生成，并且可以设置为按指定时间间隔重新生成。

4. api 路由

在您的 next.js 应用程序中创建 api 端点。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

示例：

// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'john doe', age: 30 })
}

登录后复制

这会在 /api/user 处创建一个返回用户数据的 api 端点。

使用 vercel 进行部署

使用 vercel 进行部署非常简单：

将您的 github 存储库连接到 vercel。
配置您的项目设置。
一键部署。

vercel 自动设置 ci/cd，使更新就像推送到存储库一样简单。

next.js 开发的最佳实践

1.尽可能使用静态生成

对于可以预渲染的页面，请始终选择ssg：

   export async function getstaticprops() {
     // fetch data from an api
     const res = await fetch('https://api.example.com/posts')
     const posts = await res.json()

     return {
       props: {
         posts,
       },
     }
   }

登录后复制

2.优化图片

使用next/image组件进行图像自动优化：

   import image from 'next/image'

   function homepage() {
     return (
       <image
         src="/profile.jpg"
         alt="profile picture"
         width={500}
         height={500}
       />
     )
   }

登录后复制

3.高效管理css

利用 css 模块实现组件范围内的样式：

   // styles/Home.module.css
   .container {
     padding: 0 2rem;
   }

   // pages/index.js
   import styles from '../styles/Home.module.css'

   export default function Home() {
     return <div className={styles.container}>Welcome to Next.js!</div>
   }

登录后复制