Next.js + TypeScript：构建可扩展的 Web 应用程序-JavaScript中文网-JavaScript教程资源分享门户

在如今的前端开发领域，随着 Web 应用程序功能和规模的不断扩大，越来越多的开发者开始注意到可扩展性的重要性。Next.js 和 TypeScript 是两个强大的工具，它们可以为开发者提供一种可扩展的 Web 应用程序构建方式，可以让开发者更容易地构建大型、可扩展和易于维护的 Web 应用程序。

什么是 Next.js？

Next.js 是一个基于 React 的用于服务器渲染和静态站点生成的框架。它的目标是让 React 应用程序开发变得更加容易和出色，并且支持多种渲染方式，包括服务器端渲染（SSR）、静态生成（SG）和客户端渲染（CSR）。

使用 Next.js 可以让开发者构建出更高效、更有韧性和更适应性强的 Web 应用程序，尤其是对于那些需要在多个平台上运行的大型应用程序或者需要处理高流量的应用程序来说，它的优势更加显著。

什么是 TypeScript？

TypeScript 是一种由微软开发和维护的开源编程语言，它是 JavaScript 的超集，可以转换为纯 JavaScript 代码。TypeScript 通过添加静态类型和其他特性来增强 JavaScript，使得编写和维护大型代码库变得更加容易。

TypeScript 的主要优势在于让开发人员可以在编码期间更好地捕捉常见的错误，并帮助识别潜在的编码问题，从而大大减少了调试和测试过程中的工作量。

为什么使用 Next.js 和 TypeScript？

结合 Next.js 和 TypeScript 的原因是简单的：它们是相互兼容并且提供了一种可以帮助开发人员构建可扩展的 Web 应用程序的方式。Next.js 提供了一个非常棒的基础架构，可以让您构建出高性能的 React 应用程序，并且支持页面预先渲染、懒加载和代码分割等特性。

接下来，使用 TypeScript 可以让您更好地管理代码，减少潜在的错误和调试工作量，并提高代码的可读性和可维护性。通过将 TypeScript 应用于 Next.js 项目，可以消除一些常见的问题，例如编写大型代码库时潜在的类型错误、组件之间的通信以及针对您的项目进行自定义扩展时的类型推断等问题。

总的来说，Next.js 和 TypeScript 是两个强大的工具，可以帮助您构建可扩展、高效且易于维护的 Web 应用程序。

在 Next.js 中使用 TypeScript

要在 Next.js 中使用 TypeScript，需要进行以下几个步骤：

步骤一：创建一个 Next.js 项目

首先需要创建一个 Next.js 项目。可以使用命令行工具或 Next.js 官方提供的创建工具快速创建一个新项目：

npx create-next-app my-app --typescript

这将创建一个名为 my-app 的新项目，并附带了一个 TypeScript 配置文件。

步骤二：配置 TypeScript

一旦项目创建好了，就可以进行 TypeScript 的配置了。在 tsconfig.json 中配置 TypeScript，以便正确处理您的代码：

// www.javascriptcn.com code example
{
  "compilerOptions": {
    "lib": [
      "dom",
      "es2019",
      "es2020"
    ],
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "target": "esnext"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    ".next",
    "test/**/*"
  ]
}

步骤三：定义接口和类型

一旦项目和 TypeScript 已经配置好了，就可以开始定义您的 TypeScript 接口和类型了。您可以使用类型定义和接口来定义应用程序中的常量、函数和状态类型。

interface Post {
  id: number;
  title: string;
  content: string;
  createdAt: string;
}

type PostId = Pick<Post, 'id'>;

步骤四：利用 Next.js 的 API

在 Next.js 中，可以使用 API 路由来定义自己的 API 端点。这意味着您可以将 Express、Fastify 或任何其他 Node.js Web 框架与 Next.js 一起使用，以便构建更复杂的应用程序。

// www.javascriptcn.com code example
// pages/api/posts.ts

import { NextApiRequest, NextApiResponse } from 'next';
import { Post, PostId } from '../../types';

const db = new Map<PostId, Post>();

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Post[] | Post>
) {
  const { method, query, body } = req;

  switch (method) {
    case 'GET':
      res.status(200).json([...db.values()]);
      break;
    case 'POST':
      const id = (Math.max(...db.keys()) + 1) as PostId['id'];
      const newPost = { ...body, id };
      db.set({ id }, newPost);
      res.status(200).json(newPost);
      break;
    case 'PUT':
      const { id: editedId } = query;
      const editedPost = { ...body, id: Number(editedId) };
      db.set({ id: Number(editedId) }, editedPost);
      res.status(200).json([...db.values()]);
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST', 'PUT']);

      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

步骤五：构建页面和组件

在 Next.js 中，可以使用 .tsx 扩展名创建页面和组件。您可以使用 TypeScript 提供的类型安全和其他功能来编写可靠、可读和可维护的代码。

// www.javascriptcn.com code example
// pages/index.tsx

import { useState } from 'react';
import { GetStaticProps } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { Post } from '../types';

interface Props {
  initialPosts: Post[];
}

export default function Home({ initialPosts }: Props) {
  const [posts, setPosts] = useState<Post[]>(initialPosts);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleAddPost = async () => {
    setIsLoading(true);

    const response = await fetch('/api/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, content }),
    });

    if (!response.ok) {
      alert('Failed to add the post!');
      setIsLoading(false);
      return;
    }

    const newPost: Post = await response.json();

    setPosts((oldPosts) => [...oldPosts, newPost]);
    setTitle('');
    setContent('');

    setIsLoading(false);
  };

  return (
    <div>
      <Head>
        <title>My awesome blog</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my awesome blog!</h1>

        {posts.map((post) => (
          <div key={post.id} className={styles.card}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </div>
        ))}

        {!isLoading && (
          <div className={styles.card}>
            <label htmlFor="title">Post title:</label>
            <br />
            <input
              onChange={(e) => setTitle(e.target.value)}
              value={title}
              type="text"
              id="title"
            />
            <br />
            <label htmlFor="content">Post content:</label>
            <br />
            <textarea
              onChange={(e) => setContent(e.target.value)}
              value={content}
              id="content"
            ></textarea>
            <br />
            <button onClick={handleAddPost}>Add post</button>
          </div>
        )}

        {isLoading && <p>Loading...</p>}
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const res = await fetch(`http://localhost:3000/api/posts`);
  const initialPosts: Post[] = await res.json();

  return {
    props: {
      initialPosts,
    }, // will be passed to the page component as props
  };
};

结尾

在本文中，我们探讨了如何使用 Next.js 和 TypeScript，来构建可扩展、高效且易于维护的 Web 应用程序。我们介绍了 Next.js 和 TypeScript 的主要优点，并提供了示例代码，以便您可以更好地了解如何使用它们来构建您的下一个项目。希望这篇文章能够对您的下一次 Web 应用程序构建有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d80daea941bf7134e634e3

Next.js + TypeScript：构建可扩展的 Web 应用程序