Next.js实战项目（第1节）共39节

从最新的Next.js 14.2开始，体验服务端渲染的😄(感觉又回到了从前PHP渲染前后端不分离)开个玩笑啊，这真的不一样。项目结构依赖如下

{
  ...
  "dependencies": {
    "antd": "^5.19.3",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "typescript": "^5"
  }
}

初始化项目

首先创建项目:

npx create-next-app@latest

会让你选很多配置，根据个人喜爱选择即可

接下来进入项目，安装依赖，再安装antd，直接项目即可使用了，真好！

npm i  antd --save 

import Image from "next/image";
import styles from "./page.module.css";
import { Button } from "antd";

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <Button>开启之旅</Button>
        <p>
          Get started by editing&nbsp;
          <code className={styles.code}>src/app/page.tsx</code>
        </p>
        <div>
          <a
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className={styles.center}>
        <Image
          className={styles.logo}
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

     
    </main>
  );
}

了解项目结构

Next.js中的App Router是全局的路由器，它用于在应用程序的所有页面之间进行导航。它可以用于在页面之间传递状态和数据，类似于React中的Context。 App Router是通过_app.js文件中的getInitialProps方法来配置的。

在 Next.js 中，App Router 是指导整个应用程序路由行为的基本机制。它实际上是基于文件系统的路由系统，也即是和小程序一样😄，该系统会根据您项目中 pages 文件夹的结构自动生成路由，只需要你特定的文件名即可page.js。

对于动态路由，Next.js 支持动态路由，您可以使用带有方括号 [] 的文件名来创建动态路由。例如，pages/post/[id].js 对应于 /post/:id 路径。

大致安排的目录时这个样子了。

src/
└── app
    ├── about
    │   └── page.js
    ├── globals.css
    ├── layout.js
    ├── login
    │   └── page.js
    ├── page.js 
    └── team
        └── route.js
在 Next.js 中，您不需要特殊的配置文件来设置 App Router。它是基于文件系统的，所以您只需在pages 文件夹中按照惯例组织您的文件即可。但是，您可以使用特殊的文件名来创建一些特定的路由。

好了，下节介绍一些常用配置。