nextjs 安装

切图仔仔仔
139 阅读2分钟

自动安装

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? @/*`
  • Next.js 现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。
  • 您可以选择使用src目录在项目的根目录中，将应用程序的代码与配置文件分开。

手动安装

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 使用文件系统路由，这意味着应用程序中的路由由您构建文件的方式决定。

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

创建一个文件夹app/，然后添加一个layout.tsx 和 page.tsx 文件。当用户访问应用程序的根目录/时，将呈现这些内容

创建布局

在layout.tsx添加以下内容：

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

添加内容

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

此时打开http://localhost:3000 展示出刚才编写的内容

截屏2023-12-22 15.51.03.png

页面路由器

如果您更喜欢使用页面路由器而不是应用程序路由器，则可以在项目的根目录下创建一个目录。pages/，在这个目录下新增index.tsx 这将是主页

在 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} />
}

最后，在里面添加一个文件来控制来自服务器的初始响应。详细了解自定义文档文件。pages/_document.tsx

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

Next.js 有两个不同的路由： 应用路由和页面路由。 App Router 是一个较新的路由，允许你使用 React 的最新功能，例如服务器组件和流式。 Pages Router 是原始的 Next.js 路由，它允许你构建服务器渲染的 React 应用，并继续支持旧版 Next.js 应用。

avatar
文章
阅读
粉丝