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面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。

相关推荐
Python×CATIA工业智造39 分钟前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜2 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄2 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122463 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack4 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext4 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)5 小时前
后端快捷代码
java·开发语言