Next.js 初学者入门

2024-01-24 21:44:25

Next.js 是一款流行的 React 框架，因其开箱即用的功能（例如路由、静态站点生成和服务器端渲染）以及与各种工具和库的集成而受到开发人员的欢迎。本指南将带您逐步了解如何使用 Next.js 构建一个简单的应用程序，从基本概念到路由和数据获取等关键主题。

1. 入门

首先，安装 Next.js CLI 工具：

npm install -g next

然后，创建一个新的 Next.js 项目：

npx create-next-app my-app

这将在您的计算机上创建一个名为 my-app 的新目录。

2. 基本概念

Next.js 使用基于组件的体系结构，其中应用程序被分解为可重用的组件。组件是具有自己的状态和行为的独立单元。您可以将组件嵌套在一起以构建更复杂的应用程序。

Next.js 还使用一种称为“页面”的概念。页面是应用程序中的单独页面，例如主页或联系页面。页面是组件的集合，并且它们可以被路由到。

3. 路由

Next.js 提供开箱即用的路由功能。您可以通过在 pages 目录中创建页面来定义路由。例如，以下代码创建一个名为 index.js 的页面，该页面将在应用程序的根路径下提供服务：

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        
      </Head>

      <main>
        <h1>Welcome to Next.js!</h1>
      </main>
    </div>
  )
}

您可以通过在 pages 目录中创建更多页面来定义其他路由。例如，以下代码创建一个名为 about.js 的页面，该页面将在应用程序的 /about 路径下提供服务：

import Head from 'next/head'

export default function About() {
  return (
    <div>
      <Head>
        
      </Head>

      <main>
        <h1>About Next.js</h1>
      </main>
    </div>
  )
}

4. 数据获取

Next.js 提供了几种获取数据的方法。您可以使用 getInitialProps 方法在服务器端获取数据，或者使用 useEffect 钩子在客户端获取数据。

以下代码演示如何使用 getInitialProps 方法在服务器端获取数据：

import Head from 'next/head'

export default function Home(props) {
  const { posts } = props

  return (
    <div>
      <Head>
        
      </Head>

      <main>
        <h1>Welcome to Next.js!</h1>

        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </main>
    </div>
  )
}

Home.getInitialProps = async (ctx) => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    posts,
  }
}

以下代码演示如何使用 useEffect 钩子在客户端获取数据：

import Head from 'next/head'
import { useEffect, useState } from 'react'

export default function Home() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts')
      const posts = await res.json()

      setPosts(posts)
    }

    fetchPosts()
  }, [])

  return (
    <div>
      <Head>
        
      </Head>

      <main>
        <h1>Welcome to Next.js!</h1>

        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </main>
    </div>
  )
}