Skip to main content

10 posts tagged with "Next js"

View All Tags

Next.js的Image组件是一个内置的组件,用于优化图像加载。它提供了懒加载、自动格式转换和响应式加载等功能。

以下是一个基本的使用示例:


wenhaoWebNext js2 min read

本页面提供 Next.js 项目的文件和文件夹结构概述。它涵盖了顶层文件和文件夹、配置文件以及应用程序和页面目录中的路由约定。

顶层文件夹

文件夹名说明
app应用程序路由
pages页面路由
public静态资源文件夹
src可选的应用程序源代码文件夹

wenhaoWebNext js3 min read

自动安装

我们建议使用 create-next-app 来开始一个新的 Next.js 应用,它会自动为您设置好一切。要创建一个项目,请运行:

npx create-next-app@latest

安装过程中,您将看到以下提示:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

wenhaoWebNext js4 min read

Next.js入门教程

阅读之前

在了解Next.js之前,需要掌握React的基本使用方法。

搭建

安装

# 创建项目目录
mkdir you_project
# 进入项目目录
cd you_project
# 初始化package.json
npm init -y
# 安装依赖包
npm install --save react react-dom next
# 创建一个pages文件夹
mkdir pages


wenhaoWebNext js10 min read

定义路由

我们建议在继续之前阅读路由基础知识页面。

本页面将指导您如何在 Next.js 应用程序中定义和组织路由。


wenhaoWebNext js2 min read

项目创建:

安装配置:

我们建议使用 create-next-app创建新的 Next.js 应用程序,它会自动为你设置所有内容。创建项目,请运行:

npx create-next-app@latest
# or
yarn create next-app


wenhaoWebNext js2 min read

next.config.js是Next.js项目中的一个配置文件,它允许你对Next.js的默认配置进行自定义。以下是一个如何在next.config.js中配置开发环境和生产环境的示例:


wenhaoWebNext js2 min read

Next.js使用一个名为pages的特殊目录。这个目录用于自动路由。每一个在pages目录下的.js.jsx.ts.tsx文件都会自动成为一个可访问的路由。以下是一个示例:

pages/
├── index.js
├── about.js
├── dashboard.js
├── blog/
│ ├── index.js
│ ├── [slug].js
│ └── [id]/
│ └── index.js
└── user/
├── index.js
└── [id].js

wenhaoWebNext js2 min read

_app.js说明

在Next.js中,_app.js_document.js是两个特殊的文件,它们允许你控制你的应用的外部行为和文档结构。

  1. _app.js: 这个文件用于初始化所有页面。你可以在这个文件中导入全局CSS,或者添加全局的布局,状态管理等。例如:

wenhaoWebNext js2 min read