Next.js 小白快速上手指南：从创建到部署

2025-01-14

字数：1k字 | 预计阅读时长：4分钟

摘要：✨ Next.js 就像程序员的魔法棒，能快速召唤出现代化 React 应用！不管是 SSR（服务端渲染）、SSG（静态站点生成）还是 ISR（增量静态渲染），都不在话下～🪄 本篇小白友好教程，将手把手带你从零创建一个 Next.js 项目，带你轻松入门，玩转开发全流程！

环境准备🛠️

1.检查和安装 Node.js 和 npm

1 2	node -v npm -v

确保 Node.js 的版本 >= 16（推荐）。

20250114181800

初始化一个 Next.js 项目🌱

1.使用 create-next-app 创建项目

1	npx create-next-app@latest my-next-app

2.配置说明

是否启用 TypeScript？（推荐）
是否启用 ESLint？
是否使用 Tailwind CSS？（推荐）
是否启用 src/ 目录？
是否使用新的 App Router？（推荐）
是否启用 Turbopack？
是否自定义导入路径别名？

20250114182349

20250114182429

完成后，进入项目目录：

1	cd my-next-app

项目文件结构解析 📂

**src/app/**：新的路由入口文件夹。
**public/**：静态资源存放目录。
**styles/**：默认的全局和模块化样式。
tailwind.config.ts和 postcss.config.mjs：Tailwind CSS 配置文件。
next.config.ts：Next.js 配置文件。

20250114182619

启动开发服务器🌟

1.安装依赖：

1	npm install

20250114183231

2.启动开发服务器：

1	npm run dev

20250114183425

3.访问 http://localhost:3000 验证项目是否成功运行。

20250114183522

自定义首页内容 ✍️

编辑 src/app/page.tsx 文件，定制你的首页：

export default function Home() {
  return (
    <div className="text-center p-10">
      <h1 className="text-4xl font-bold text-blue-600">欢迎来到我的 Next.js 应用！🎉</h1>
      <p>这是你的自定义首页。</p>
    </div>
  );
}

20250114185018

亮点：我们使用了 Tailwind CSS 提供的实用工具类快速设置样式。

创建新页面 📝

Next.js 提供了文件系统路由，创建页面非常简单：

在 src/app/ 下创建 about/page.tsx 文件：

1
2
3

export default function About() {
  return <h1>About Page</h1>;
}

访问 /about 查看新页面。

访问 http://localhost:3000/about 查看新页面。

静态资源和优化图片 🌈

添加图片文件到 public/。

使用 Next.js 的 Image 组件加载图片：

import Image from "next/image";

export default function Home() {
  return <Image src="/example.png" alt="Example" width={500} height={300} />;
}

配置 Tailwind CSS🎨

修改 tailwind.config.js 文件：

const config = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        customBlue: "#1e40af",
      },
    },
  },
  plugins: [],
};

export default config;

在组件中使用：

1	<div className="bg-customBlue text-white p-4">Custom Styled Div</div>

部署项目到 Gitee 🌍

1.创建 Gitee 仓库

登录 Gitee 并创建一个新的仓库。
复制仓库的 SSH 地址，例如：git@gitee.com:yourusername/yourproject.git。

2.配置本地 SSH 密钥

确保已生成 SSH 密钥。如果没有，请使用以下命令生成：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

将生成的公钥（通常位于 ~/.ssh/id_rsa.pub）添加到 Gitee 的 SSH公钥设置页面。
在 Gitee 右上角头像下拉菜单中，选择设置 -> SSH 公钥 -> 添加公钥。

20250115162147

3.将项目推送到 Gitee

初始化 Git 仓库（如果尚未初始化）：

1
2
3

git init
git add .
git commit -m "Initial commit"

20250115162012

添加 Gitee 仓库的 SSH 地址作为远程仓库：

git remote add origin git@gitee.com:yourusername/yourproject.git

推送代码到 Gitee：

git push -u origin master

20250115162240

4.验证部署结果

在 Gitee 的仓库页面查看代码是否成功推送。
将项目的 Gitee 仓库地址分享或配置为部署来源。

20250115162339

5.本地打包

npm run build

如果需要进一步自动化 Gitee 的部署，可以结合 Gitee Pages 功能，将构建后的静态文件发布为一个网站。

常见问题及解决💡

项目初始化错误路径问题
npm 无法找到 package.json

依赖安装速度慢时如何切换到淘宝镜像：

1	npm config set registry https://registry.npm.taobao.org

结论

Next.js 提供了强大的功能支持，适合构建现代化的 Web 应用。希望这篇完整指南帮助你轻松入门并完成自己的项目！ 🎉

-------------本文结束感谢您的阅读-------------

本文作者： 金金
本文链接： http://example.com/2025/01/14/Next.js 小白快速上手指南：从创建到部署/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！