Next.js 安装使用教程

一、Next.js 简介

Next.js 是一个基于 React 的服务端渲染(SSR)框架,由 Vercel 开发和维护。它支持静态生成(SSG)、服务器端渲染(SSR)、API 路由等特性,广泛应用于现代 Web 开发和 Jamstack 架构中。


二、安装前准备

2.1 安装 Node.js

访问 https://nodejs.org/ 下载并安装 LTS 版本。

2.2 推荐使用包管理器:npm 或 yarn

可通过以下命令验证安装:

bash 复制代码
node -v
npm -v

三、使用 Create Next App 快速创建项目

3.1 创建项目

bash 复制代码
npx create-next-app@latest my-next-app
cd my-next-app

或使用 yarn:

bash 复制代码
yarn create next-app my-next-app
cd my-next-app

创建时可选择:

  • TypeScript 支持
  • ESLint 配置
  • Tailwind CSS 集成

3.2 运行项目

bash 复制代码
npm run dev

默认在 http://localhost:3000 访问


四、项目结构说明

复制代码
my-next-app/
├── pages/               # 页面组件,自动路由
│   ├── index.js         # 首页
│   └── about.js         # 关于页
├── public/              # 静态资源目录
├── styles/              # 样式文件目录
├── components/          # 可复用组件
├── next.config.js       # 配置文件
└── package.json

五、编写首页示例

js 复制代码
// pages/index.js
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>我的 Next.js 应用</title>
      </Head>
      <h1>你好,Next.js!</h1>
    </div>
  )
}

六、页面导航

js 复制代码
// pages/about.js
import Link from 'next/link'

export default function About() {
  return (
    <div>
      <h2>关于我们</h2>
      <Link href="/">返回首页</Link>
    </div>
  )
}

七、服务端渲染(SSR)与静态生成(SSG)

7.1 SSR:getServerSideProps

js 复制代码
export async function getServerSideProps() {
  return {
    props: { time: new Date().toISOString() },
  }
}

7.2 SSG:getStaticProps

js 复制代码
export async function getStaticProps() {
  return {
    props: { message: '静态生成页面' },
  }
}

八、API 路由(后端接口)

js 复制代码
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' })
}

访问地址:http://localhost:3000/api/hello


九、部署方式

  • Vercel(推荐):一键部署,支持自动构建和预览
  • 自定义服务器部署:支持 Docker、PM2 等

十、常见问题

Q1: 编译失败?

  • 尝试 npm install 修复依赖
  • 检查是否启用了 TypeScript 或 Tailwind,确保配置正确

Q2: 页面路径访问不到?

  • 确保文件放在 pages/ 目录,命名正确(支持嵌套路由)

十一、学习资源推荐


本文由"小奇Java面试"原创发布,转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。

相关推荐
边疆.39 分钟前
【C语言】文件操作
c语言·开发语言·文件操作
皮卡蛋炒饭.1 小时前
C++中既重要又困难的部分—类和对象
java·开发语言
香蕉可乐荷包蛋1 小时前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
命苦的孩子1 小时前
Java 数学工具类 Math
java·开发语言
格调UI成品1 小时前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip1 小时前
微前端框架选型
前端·javascript
你可以叫我仔哥呀1 小时前
Java程序员学从0学AI(七)
java·开发语言·人工智能·ai·spring ai
一只小风华~2 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰2 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
程序媛李李李李李蕾2 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端