Next.js TypeScript

NextJS 是一个强大且受欢迎的JavaScript框架，用于构建服务器渲染的React应用程序。它提供了一个开发环境，内置支持TypeScript，以及一组功能，使构建和部署Web应用程序变得容易。它由Zeit开发并因其简单性、性能和可扩展性而广泛采用。在本文中，我们将看看如何使用TypeScript和NextJS构建高质量和可伸缩的应用程序。

TypeScript 是JavaScript的严格语法扩展，这意味着任何有效的JavaScript代码也都是有效的TypeScript代码。然而，TypeScript还添加了其他功能，如静态类型、类和接口，这可以帮助开发人员编写更易于维护和可伸缩的代码。

使用TypeScript与NextJS有几个好处：

提高可伸缩性： 大型NextJS应用程序可以从TypeScript的类和接口功能提供的结构和组织中受益。这可以使管理和维护复杂的代码库变得更容易。
提高代码质量： TypeScript的静态类型允许开发人员在开发过程的早期捕获错误并避免运行时错误。这可以产生更高质量的代码和更好的用户体验。
提高生产力： TypeScript丰富的类型系统和强大的编辑器支持（例如智能感知）可以帮助开发人员更快地编写代码，并减少错误。

安装带有TypeScript的next js的步骤

步骤1： 为项目创建一个新目录：

mkdir my-proj

步骤2： 切换到您项目的新目录：

cd my-proj

步骤3： 通过输入以下代码，初始化一个使用TypeScript的新的Next.js项目：

npx create-next-app . --template with-typescript

设置配置文件

为了设置Next.js TypeScript配置，您可以在项目的根目录中添加一个 tsconfig.json 文件，内容如下：

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "jsx": "preserve",
        "lib": ["dom", "esnext"],
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
            "~/*": ["./*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

项目结构：

Next.js TypeScript

依赖文件夹应该看起来像这样：

Next.js TypeScript

示例1： 此示例展示了使用Next.js和TypeScript中的状态变量。在这个示例中，我们有一个简单的计数器，每次点击按钮时增加1。将以下代码添加到您项目中的‘index.tsx’文件中的‘pages’目录。

pages/index.tsx

import { useState } from 'react'
import Head from 'next/head'
  
const Counter: React.FunctionComponent = () => { 
    const [count, setCount] = useState(0) 
  
    return ( 
        <div> 
            <Head> 
                <title>Counter</title> 
            </Head> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
            <h3>Counter Example</h3> 
            <p>Count: {count}</p> 
            <button onClick= 
                {() => setCount(count + 1)}> 
                Increment 
            </button> 
        </div> 
    ) 
} 
  
export default Counter;

在终端中输入以下代码来运行代码:

npm run dev

输出 :

Next.js TypeScript

示例2： 此示例演示了在Next.js和TypeScript中使用带有输入字段的表单。在此示例中，我们有一个简单的表单，其中包含用于姓名和电子邮件的两个输入字段以及一个提交按钮。将以下代码添加到项目的“pages”目录下的“index.tsx”文件中。

pages/index.tsx:

import { useState } from 'react'
import Head from 'next/head'
  
const ContactForm: React.FunctionComponent = () => { 
    const [form, setForm] = useState({ name: '', email: '' }) 
  
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { 
        setForm({ ...form, [event.target.name]: event.target.value }) 
    } 
  
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { 
        event.preventDefault() 
        alert(`Name:  ${form.name} Email:$ {form.email}`) 
    } 
  
    return ( 
        <div> 
            <Head> 
                <title> 
                    Next.JS + TypeScript Example : Contact Form 
                </title> 
            </Head> 
  
            <center> 
                <h1 style={{ color: 'green' }}> 
                    GeeksforGeeks 
                </h1> 
                <h3>Next.JS + TypeScript</h3> 
            </center> 
            <h5>Contact Form Example </h5> 
            <form onSubmit={handleSubmit}> 
                <label> 
                    Name: 
                    <input type="text" name="name" 
                        value={form.name}  
                        onChange={handleChange} /> 
                </label> 
                <br /> 
                <label> 
                    Email: 
                    <input type="email" name="email" 
                        value={form.email}  
                        onChange={handleChange} /> 
                </label> 
                <br /> 
                <button type="submit">Submit</button> 
            </form> 
        </div> 
    ) 
} 
  
export default ContactForm;

在终端中运行代码，请键入以下代码：