为静态资源添加路径前缀并支持发布到 CDN

快速开始

欢迎各位进行阅读 Next.js 文档!

若是你是刚开始接触 Next.js 的话, 我们这边会向你做出建议, 让你先从这个地方的互动课程开始做起。

通过这些带有小测验的互动课程, 你将会学到使用 Next.js 所需的全部知识。

如果你有关于 next.js 相关的任何问题, 你可以随时在上面去向我们的社区寻求帮助的这样一个行为是得到欢迎的。

我们建议大家去使用那个叫作 -next-app 的命令来创建一个全新的 Next.js 应用程序, 因为这个做法可以自动地、妥善地为你处理好所有必须的相关事项。如果你想要着手创建出这个项目的话, 那么, 请你务必运行以下的内容:

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

# or

yarn create next-app

如果用户是想要去开发一个项目的话, 那么可以通过添加 -- 参数的方式来进行新项目的创建操作。

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

# or

yarn create next-app --typescript

在安装完毕之后。

对于使用 -next-app 的相关情况, 大家如果有想要了解的详细信息, 不妨去翻看一下关于 -next-app 的文档说明。

为你的项目安装 next、react 和 react-dom :

bash 复制代码
npm install next react react-dom

# or

yarn add next react react-dom

找到那个叫做 .json 的文件, 把它给打开, 然后在里面加上那段叫做配置的东西, 也就是配置段。

json 复制代码
"scripts": {

"dev": "next dev",

"build": "next build",

"start": "next start",

"lint": "next lint"

}

这些脚本所关联的范畴, 覆盖了在开发应用软件的过程里面所存在的不同的阶段。

Next.js这个技术, 它是绕着那个叫页面的概念来建立的。所谓一个页面, 它其实就是指从名为pages的目录里面找出来的那些用英文写的JS、JSX、TS或者TSX文件。而这些文件导出的, 就叫做React组件。

页面(page)是根据它自己所在的那个文件名,跟路由之间产生关联关系的。举个例子来说话, pages/about.js 这个文件, 就被映射到了 /about 这个地方去。甚至于, 还可以在文件名内部的位置, 加入动态路由所使用到的参数的。

请在你的项目里面去创建一个叫做 pages 的目录。

请把下面的这些内容, 给填充到那个叫作 ./pages/index.js 的文件里面去。

jsx 复制代码
function HomePage() {

return <div>Welcome to Next.js!div>

}

export default HomePage

迄今为止, 我们能够确认到的是。

另外, 在任何时候, 您开发的基于 Next.js 构建的项目都能直接被放到生产环境里去做使用, 要是想了解关于这些事情的详细信息的话, 您可以去我们的相关的部署文档里面去进行阅读。

咱们在后续的时候, 建议去把下面列出来的那几个章节好好地读一下、学一学。

关于Next, 可以进一步去了解一下所谓的pages这个玩意儿到底是什么。

对 CSS 的支持这一块, 是采用内置的 CSS 支持这种方式, 来向应用程序添加自定义样式的。

CLI了解有关 Next.js CLI 的更多信息。

相关推荐
2601_967987374 小时前
完整教程:Next.js项目演示(从零创建Next.js项目)Next.js入门实战
react·教程·前端开发·next.js·项目创建
李纲明8 小时前
WordPress 登录后跳回登录页或一直转圈:先核 Cookie、站点 URL 与 HTTPS,再查 CDN 与安全插件
登录·cdn·wordpress·cookie·devdiy·安全插件
2601_967987373 天前
Next.js 文档
react·开发·全栈·文档·next.js
李纲明4 天前
WordPress 前台改完还是旧页:浏览器、CDN、页面缓存、对象缓存怎么分层清
缓存·cdn·wordpress·devdiy
Vitaliy Kostrov(柯维远)4 天前
Multi-CDN 决策闭环:QoE、成本、安全与内容正确性如何进入同一个策略引擎?
安全·网络安全·云计算·音视频·负载均衡·cdn
李纲明7 天前
WordPress 挂上 Cloudflare 后询盘和后台异常:缓存规则、SSL 模式和真实 IP 怎么核
运维·缓存·https·cdn·wordpress·cloudflare
李纲明8 天前
WordPress 媒体库上传图片报「HTTP 错误」:php.ini、临时目录、安全插件和 CDN 怎么逐层查
运维·php·上传·cdn·wordpress·媒体库
Vitaliy Kostrov(柯维远)12 天前
客户端如何检查直播流:从流内标记到停止播放
android·运维·服务器·驱动开发·网络安全·系统架构·cdn
天道kabuto14 天前
别被 500 骗了:一次 Vercel 部署中 ESM/CJS 混战的真实复盘
next.js