不会Next.js，怎Neng称自己是React高手？说实话，咱就是说Next.js现在太火了你要是不会，dou不好意思说自己是React高手。

哈哈，不开玩笑，Next.js 确实是React开发者必学的技术之一。它提供了hen多开箱即用的功Neng，比如服务端渲染、静态站点生成、路由等等，Neng大大提高我们的开发效率。

Ru果你用过原生React开发网站，一定遇到过这些问题：

比如SEO优化困难，因为React是客户端渲染，搜索引擎爬虫不友好；

还有首屏加载慢，因为要加载大量的JavaScript代码；

以及路由配置麻烦，需要使用第三方库等等。

Next.js 就是来解决这些问题的。它是React的全栈框架，给你提供了一整套开箱即用的解决方案：

比如基于文件系统的路由，不用自己配置路由；

服务端渲染和静态站点生成，提高首屏加载速度和SEO；

还有hen多其他的功Neng，比如自动代码拆分、智Neng化打包等等。

Next.js 提供了官方的脚手架工具，一条命令就Neng创建项目。

npx create-next-app@latest

根据提示选择项目名称、是否使用TypeScript、是否开启ESLint等等，根据自己的实际情况进行选择即可。

现在我们来kan一下创建好的项目结构：

my-first-next-app/├── node_modules/├── .next/ # 构建输出目录├── app/│ ├── favicon.ico│ ├── globals.css│ ├── layout.tsx│ └── page.tsx├── .gitignore├── eslint.config.mjs # ESLint 配置├── next-env.d.ts # TypeScript 环境类型定义├── next.config.ts # Next.js 自定义配置├── package.json├── postcss.config.mjs # PostCSS 配置├── README.md├── tailwind.config.ts # Tailwind CSS 配置└── tsconfig.json # TypeScript 配置

重点kanapp/目录，这就是App Router的核心：

import type { Metadata } from "next";import { Geist, Geist_Mono } from "next/font/google";import "./globals.css";const geistSans = Geist;const geistMono = Geist_Mono;export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app",};export default function RootLayout { return ;}

kan到{children}了吗？你的页面内容会渲染在这里。所以所有页面dou会被这个根布局包裹。

好了现在我们Ke以运行项目了。执行：pnpm dev

打开浏览器，访问http://localhost:, 你应该就Nengkan到Next.js的默认欢迎页面了。

"为什么百度不收录我的网站？"这个问题你有没有遇到过？

"为什么百度不收录"这个问题其实hen多开发者dou遇到过。简单说百度爬虫Neng不Neng抓取到你的网站，是一个hen复杂的问题，跟你的网站结构、内容质量、服务器响应速度等等dou有关系。你Ke以检查下是不是因为你的网站是客户端渲染，导致百度爬虫抓不到内容；或者是不是你的robots.txt配置有问题，阻止了爬虫的抓取；再或者，是不是你的网站内容不够优质，被百度判断为低质量网站等等。不对不对，应该是先检查robots.txt和meta标签吧？你懂的，这些dou会影响搜索引擎的收录。"不会Next.js，怎Neng称自己是React高手？"这才是重点！

在 App Router 中，每个page.tsx文件对应一个路由页面。

NEXT.JS支持规模化的生产级React应用程序。大量世界领先的公司dou在使用Next.js来构建静态和动态网站及web应用。害，说这么多，不如直接上手试试！

NEXT.JS零配置自动编译并打包。从一开始就为生产环境而优化。

混合模式: SSG 和 SSR 在一个项目中同时支持构建时预渲染页面和请求时渲染页面。

简单说：NEXT.JS它是一个全Neng型选手，既NengZuo服务端渲染，又NengZuo静态站点生成，还支持增量静态再生等高级功Neng。你Ke以把它理解为一个超级强大的React框架，让你Ke以专注于写业务代码，而不用担心各种配置和优化问题。

大家好，这是我的《NEXT.JS 入门笔记》专栏第一篇文章。Ru果你Yi经会REACT，但还没真正开始用NEXT.JSZuo项目，那这篇文章就是为你准备的。

本文我们就从零开始，一起创建你的第一个NEXT.JS应用，运行起来kan到效果。

下一篇文章，我们一起来学习路由，怎么创建多个页面怎么跳转链接，不见不散。