Next.js 学习笔记（一）——安装

2023-12-16 17:33:17

安装

系统要求：

  • Node.js 18.17 或更高版本
  • 支持 macOS、Windows（包括 WSL）和 Linux

自动安装

我们建议使用 create-next-app 启动一个新的 Next.js 应用程序，该应用程序会自动为你设置所有内容。要创建项目，请运行：

npx create-next-app@latest

安装时，你将看到以下提示：

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

提示后，create-next-app 将使用你的项目名称创建一个文件夹，并安装所需的依赖项。

需要知道：

手动安装

要手动创建新的 Next.js 应用程序，请安装所需的软件包：

npm install next@latest react@latest react-dom@latest

打开你的 package.json 文件并添加以下 scripts：

// package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

这些脚本指的是开发应用程序的不同阶段：

  • dev：运行 next dev 以在开发模式下启动 Next.js
  • build：运行 next build 来构建应用程序以供生产使用
  • start：运行 next start 来启动 Next.js 生产服务器
  • lint：运行 next lint 来设置 Next.js 的内置 ESLint 配置

正在创建目录

Next.js 使用文件系统路由，这意味着应用程序中的路由由文件的结构决定。

app 目录

对于新应用程序，我们建议使用 App Router。该路由器允许你使用 React 的最新功能，是基于社区反馈的 Pages Router 的演变。

创建一个 app/ 文件夹，然后添加 layout.tsx 和 page.tsx 文件。这些将在用户访问应用程序的根目录（/）时渲染。

在这里插入图片描述

使用所需的 <html> 和 <body> 标签在 app/layout.tsx 内创建根 layout：

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最后，创建一个主页 app/page.tsx，其中包含一些初始内容：

// app/page.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

需要知道：如果你忘记创建 layout.tsx，Next.js 将在与 next dev 一起运行开发服务器时自动创建这个文件。

了解有关使用 App Router 的更多信息。

pages 目录（可选）

如果你更喜欢使用 Pages Router 而不是 App Router，你可以在项目的根目录中创建页/pages 目录。

然后，在 pages 文件夹中添加一个 index.tsx 文件。这将是你的主页（/）：

// pages/index.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

接下来，在 pages/ 中添加 _app.tsx 文件以定义全局 layout。了解有关自定义 App 文件的更多信息。

// pages/_app.tsx

import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最后，在 pages/ 中添加一个 _document.tsx 文件，以控制来自服务器的初始响应。了解有关自定义 Document 文件的详细信息。

// pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

了解有关使用 Pages Router 的更多信息。

需要知道：虽然你可以在同一个项目中使用多个路由器，但 app 中的路由将优先于 pages。我们建议你在新项目中只使用一个路由器，以避免混淆。

public 文件夹（可选）

创建一个 public 文件夹来存储静态资产，例如：图像、字体等。然后，public 目录中的文件可以由代码从基本 URL（/）开始引用。

运行开发服务器

  • 运行 npm run dev 以启动开发服务器
  • 参观 http://localhost:3000 以查看您的应用程序
  • 编辑 app/page.tsx（或 pages/index.tsx）文件并保存它，以便在浏览器中查看更新的结果

文章来源:https://blog.csdn.net/Jackson_Mseven/article/details/135033791
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。