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