nextjs的基础了解

Next.js 是一个基于 React 的框架,提供了服务器端渲染(SSR)、静态站点生成(SSG)、路由、API 路由等功能,适合构建高性能的现代 Web 应用。以下是 Next.js 的基本用法和实例。

1. 安装 Next.js

首先,确保你已经安装了 Node.js。然后,可以通过以下命令创建一个新的 Next.js 项目:

```bash

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

cd my-next-app

npm run dev

```

2. 项目结构

一个典型的 Next.js 项目结构如下:

```

my-next-app/

├── pages/

│ ├── index.js

│ ├── _app.js

│ ├── api/

│ │ └── hello.js

├── public/

│ ├── favicon.ico

│ └── vercel.svg

├── styles/

│ ├── globals.css

│ └── Home.module.css

├── package.json

└── next.config.js

```

3. 页面和路由

Next.js 使用文件系统路由,`pages` 目录下的文件会自动映射为路由。例如:

  • `pages/index.js` 对应 `/`

  • `pages/about.js` 对应 `/about`

  • `pages/posts/[id].js` 对应动态路由 `/posts/1`, `/posts/2` 等

示例:创建首页

```javascript

// pages/index.js

export default function Home() {

return (

<div>

<h1>Welcome to Next.js!</h1>

</div>

);

}

```

示例:创建关于页面

```javascript

// pages/about.js

export default function About() {

return (

<div>

<h1>About Us</h1>

<p>This is the about page.</p>

</div>

);

}

```

4. 动态路由

Next.js 支持动态路由,可以通过文件名中的 `[]` 来定义动态路由。

示例:动态路由

```javascript

// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {

const router = useRouter();

const { id } = router.query;

return (

<div>

<h1>Post ID: {id}</h1>

</div>

);

}

```

5. API 路由

Next.js 允许你在 `pages/api` 目录下创建 API 路由,这些路由会作为服务器端 API 端点。

示例:创建 API 端点

```javascript

// pages/api/hello.js

export default function handler(req, res) {

res.status(200).json({ message: 'Hello, world!' });

}

```

你可以通过 `/api/hello` 访问这个 API。

6. 静态生成和服务器端渲染

Next.js 支持静态生成(SSG)和服务器端渲染(SSR)。

示例:静态生成

```javascript

// pages/posts/[id].js

export async function getStaticPaths() {

const paths = [

{ params: { id: '1' } },

{ params: { id: '2' } },

];

return { paths, fallback: false };

}

export async function getStaticProps({ params }) {

const post = { id: params.id, title: `Post ${params.id}` };

return { props: { post } };

}

export default function Post({ post }) {

return (

<div>

<h1>{post.title}</h1>

</div>

);

}

```

示例:服务器端渲染

```javascript

// pages/posts/[id].js

export async function getServerSideProps({ params }) {

const post = { id: params.id, title: `Post ${params.id}` };

return { props: { post } };

}

export default function Post({ post }) {

return (

<div>

<h1>{post.title}</h1>

</div>

);

}

```

7. 样式

Next.js 支持多种样式方案,包括 CSS Modules、Styled JSX、Tailwind CSS 等。

示例:使用 CSS Modules

```javascript

// pages/index.js

import styles from '../styles/Home.module.css';

export default function Home() {

return (

<div className={styles.container}>

<h1 className={styles.title}>Welcome to Next.js!</h1>

</div>

);

}

```

```css

/* styles/Home.module.css */

.container {

padding: 20px;

}

.title {

color: blue;

}

```

8. 部署

Next.js 应用可以部署到 Vercel、Netlify 等平台,也可以部署到自己的服务器。

部署到 Vercel

  1. 安装 Vercel CLI:

```bash

npm install -g vercel

```

  1. 部署:

```bash

vercel

```

9. 更多功能

Next.js 还支持以下功能:

  • **图像优化**:通过 `next/image` 组件优化图像加载。

  • **国际化**:支持多语言路由。

  • **中间件**:在请求到达页面之前执行代码。

  • **增量静态再生**:在构建后更新静态页面。

10. 参考文档

  • Next.js 官方文档\](https://nextjs.org/docs)

通过以上内容,你可以快速上手 Next.js 并开始构建现代 Web 应用。

相关推荐
runnerdancer4 分钟前
解构shopify,从0到1实现落地页低代码编辑器
前端
WEI_Gaot23 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员27 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai27 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙27 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子27 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125029 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll29 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding30 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥41 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js