next.js的使用

原创

虾王之王 2024-02-06 19:16:31 ©著作权

文章标签 html 服务器 App 文章分类 React.js 前端开发

©著作权归作者所有：来自51CTO博客作者虾王之王的原创作品，请联系作者获取转载授权，否则将追究法律责任

入门

简介

nextjs是Facebook为React创建的类似webpack的开发创建，不仅如此，nextjs同时也是SSR方案。功能非常强大。

安装

我们建议使用 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 现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。
你可以选择在项目的根目录中使用 src 目录将应用的代码与配置文件分开。

手动安装

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

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

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

{
  "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` 目录

对于新应用，我们建议使用应用路由。该路由允许你使用 React 的最新功能，并且是基于社区反馈的页面路由的演变。

创建 app/ 文件夹，然后添加 layout.tsx 和 page.tsx 文件。当用户访问应用的根目录 (/) 时，将渲染这些内容。

next.js的使用_服务器

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

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

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

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

很高兴知道：如果你忘记创建 layout.tsx，Next.js 将在使用 next dev 运行开发服务器时自动创建此文件。

了解有关使用应用路由的更多信息。

`pages` 目录（可选）

如果你更喜欢使用页面路由而不是应用路由，你可以在项目的根目录下创建一个 pages/ 目录。

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

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

接下来，在 pages/ 内添加 _app.tsx 文件来定义全局布局。了解有关自定义应用文件的更多信息。

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

了解有关使用页面路由的更多信息。