本地开发
localhost
localhost
http://localhost:3001含义
一个主机名,指向运行浏览器或命令的同一台计算机。
用途
在检查同一 Mac 或 PC 上的网站时,请使用 localhost。
注意
手机和平板电脑有自己的本地地址,因此它们无法使用 Mac 设备的本地地址。
示例
http://localhost:3001请求示例
在 localhost 上打开本地站点,并检查新的参考页面。
编程
了解本地开发服务器、网络 URL、端口、构建、部署、警告与常见 Web 错误。
42 个项目
本地开发
localhost
http://localhost:3001一个主机名,指向运行浏览器或命令的同一台计算机。
在检查同一 Mac 或 PC 上的网站时,请使用 localhost。
手机和平板电脑有自己的本地地址,因此它们无法使用 Mac 设备的本地地址。
http://localhost:3001在 localhost 上打开本地站点,并检查新的参考页面。
本地开发
127.0.0.1
http://127.0.0.1:3001一个环回 IP 地址,也指向同一本地计算机。
它通常可以与 localhost 互换,用于同一设备的测试。
http://127.0.0.1:3001如果localhost无法正确解析,请尝试127.0.0.1。
本地开发
Dev server
npm run dev用于开发的服务器,具有快速重建和仅用于开发的功能。
使用它在构建或部署网站之前预览更改。
开发服务器的行为并不总是与部署的生产环境行为完全相同。
npm run dev启动开发服务器,以便我可以在我的 iPhone 上查看该页面。
本地开发
Port
http://localhost:3001一个用于标识哪个服务器进程应该接收到机器上的连接的数字。
如果一个服务器使用 3001 端口,另一个服务器必须使用不同的端口,例如 3002。
http://localhost:3001如果 3001 端口已被占用,请启动开发服务器并使用其他端口。
本地开发
Local URL
Local: http://localhost:3001从运行开发服务器的同一设备使用的地址。
对于开发机器上的桌面浏览器检查,请使用 Local URL。
Local: http://localhost:3001在启动开发服务器后,告诉我 Local URL。
网络访问
Network URL
Network: http://172.30.1.55:3001一个其他设备在同一网络上使用的地址,用于访问开发服务器。
在从 iPhone、iPad 或同一 Wi-Fi 上的另一台计算机检查网站时使用。
开发服务器必须监听网络可访问的主机,例如 0.0.0.0。
Network: http://172.30.1.55:3001使用网络 URL 启动开发服务器,以便我可以在我的 iPad 上进行测试。
网络访问
IP address
172.30.1.55一个用于标识网络中设备的数字地址。
一个 LAN IP 地址允许同一 Wi-Fi 上的其他设备访问您的开发服务器。
本地网络 IP 地址可能会在 Wi-Fi 或路由器条件发生变化时发生变化。
172.30.1.55在为设备测试添加 allowedDevOrigins 时,请使用当前的 LAN IP。
网络访问
Host
--hostname 0.0.0.0服务器开始侦听请求时绑定的地址。
绑定到 0.0.0.0 允许开发服务器从网络中的其他设备访问。
--hostname 0.0.0.0使用主机名 0.0.0.0 运行开发服务器,以便进行手机测试。
网络访问
Same network
相同的 Wi-Fi 下的 Mac 和 iPhone连接到同一本地网络的设备,通常是同一 Wi-Fi 路由器。
只有当网络设置允许时,手机才能访问 Mac 设备的服务器。
相同的 Wi-Fi 下的 Mac 和 iPhone在调试网站之前,检查 iPhone 和 Mac 是否在同一网络上。
Next.js 行为
allowedDevOrigins
allowedDevOrigins: ['172.30.1.55']一个 Next.js 开发设置,允许特定的源访问开发资源。
在使用 LAN IP 从手机或平板电脑测试 Next 开发服务器时,可能需要它。
这是一个开发环境设置。 部署的静态站点不使用相同的开发资源访问路径。
allowedDevOrigins: ['172.30.1.55']将我的当前 LAN IP 地址添加到 allowedDevOrigins 以进行开发测试。
网络访问
Cross-origin
Blocked cross-origin request跨域请求,其中方案、主机或端口不同。
开发工具默认情况下可能会阻止对敏感开发资源的跨域访问。
Blocked cross-origin request解释这个跨域警告是否会影响生产部署。
Next.js 行为
HMR
/_next/webpack-hmr热模块替换 (Hot Module Replacement) 在开发过程中无需完全重新加载即可更新浏览器。
如果 HMR 开发资源被阻止,页面可能会加载,但交互式更新或脚本在开发过程中可能会出现异常。
HMR 仅用于开发,不包含在最终的静态导出中。
/_next/webpack-hmr检查 iPhone 问题是否由阻止的 HMR 开发资源引起的。
Next.js 行为
Turbopack
Next.js 16.2.5 (Turbopack)一个由 Next.js 用于开发和构建工作流程的打包工具。
您可能会在开发服务器或构建输出中看到它的名称。
Next.js 16.2.5 (Turbopack)总结 Turbopack 的输出,并告诉我构建是否成功。
Next.js 行为
App Router
src/app/[locale]/reference/page.tsx基于应用程序目录的 Next.js 路由系统。
在文件夹下添加一个 page.tsx 文件会创建一个路由。
src/app/[locale]/reference/page.tsx使用 App Router 文件夹结构添加新的参考页面。
Next.js 行为
generateStaticParams
generateStaticParams()一个 Next.js 函数,用于声明应该在构建时生成哪些动态路由。
区域页面使用它来创建 /en、/ko、/ja 以及其他语言路径。
generateStaticParams()确保新的参考页面具有适用于所有区域的 generateStaticParams。
构建与输出
Build
npm run build编译并准备网站以进行生产或静态输出的过程。
在部署之前运行构建,以检测 TypeScript、路由和静态生成问题。
npm run build运行构建过程,并确认是否生成了新的路由。
构建与输出
Lint
npm run lint一种静态代码检查,用于检测样式、正确性和框架规则问题。
代码检查是在构建或提交之前的快速检查。
npm run lint在编辑参考页面后,运行 lint 工具。
构建与输出
Static export
output: "export"一种构建输出,其中页面以静态文件形式生成,而不是需要运行服务器。
静态导出适用于将站点托管为预构建的 HTML、CSS 和 JavaScript 文件。
某些仅在服务器端运行的功能与静态导出不兼容。
output: "export"保持新页面与静态导出兼容。
构建与输出
SSG
● (SSG) prerendered as static HTML静态站点生成在构建时创建页面。
为每个区域生成引用页面,这些页面在构建过程中使用 `generateStaticParams`。
● (SSG) prerendered as static HTML确认参考路由在构建输出中显示为 SSG。
构建与输出
Prerender
预渲染为静态内容在用户请求之前渲染页面,通常在构建过程中。
预渲染的页面加载速度快,因为 HTML 已经存在。
预渲染为静态内容检查所有区域页面是否成功预渲染。
构建与输出
Bundle
静态 JS 包组合代码和依赖项,用于浏览器的编译文件。
大型包可能会影响加载速度,并且应该在网站增长时加以关注。
静态 JS 包避免仅为简单的参考页面而添加大型库。
部署
Deploy
部署静态输出发布已构建的网站,以便用户可以通过网络访问它。
在进行本地检查、代码检查和构建通过后,才会进行部署。
部署静态输出不要立即部署;只需准备页面并运行构建。
部署
Production
production deployment用户访问的实际部署环境。
生产应该与本地开发服务器进行不同的测试,因为开发服务器上特有的功能在生产环境中不存在。
production deployment解释这个警告是否会影响生产环境,或者仅影响开发环境。
部署
Hosting
静态托管服务提供商存储和提供已部署网站文件的服务或服务器。
静态导出可以通过静态托管提供,当不需要服务器逻辑时。
静态托管服务提供商确保输出在静态托管环境中有效。
部署
Domain
example.com用户键入以访问站点的可读地址。
一个域名指向通过 DNS 部署的托管位置。
example.com不要将 localhost 硬编码到应该在生产环境域名上工作的链接中。
部署
DNS
记录 / CNAME 记录将域名映射到服务器或托管目标的系统。
为了使自定义域名访问已部署的站点,必须正确配置 DNS。
记录 / CNAME 记录解释问题是 DNS 问题还是应用构建问题。
部署
Cache
clear browser cache存储文件的副本或用于加快页面加载的响应。
在部署后,旧的缓存文件可能会导致浏览器在一段时间内显示旧版本。
clear browser cache检查旧页面是否仍然显示,因为缓存问题。
运行环境
Node.js
node --version一种 JavaScript 运行时环境,用于运行开发工具、构建脚本和服务器。
Next.js 的 dev 和 build 命令在 Node.js 上运行。
node --version请告诉我,这个警告是来自 Node.js、Next.js,还是我的应用程序代码。
运行环境
npm
npm run build一个常用的 JavaScript 项目中的包管理器和脚本运行器。
package.json 定义了 npm 可以运行的脚本,例如 dev、lint 和 build。
npm run build运行 npm build 脚本,并总结结果。
运行环境
package.json
"scripts": { "dev": "next dev -p 3001" }一个定义脚本、依赖项和包元数据的项目文件。
检查 package.json 文件,以了解项目期望您运行哪些命令。
"scripts": { "dev": "next dev -p 3001" }在决定运行哪个开发命令之前,请检查 package.json 文件。
运行环境
Environment variable
NEXT_PUBLIC_SITE_URL=https://example.com传递给应用程序或构建环境的,不在源代码之外的值。
环境变量用于站点 URL、API 密钥和特定于部署的设置。
密钥不应通过公共客户端变量暴露。
NEXT_PUBLIC_SITE_URL=https://example.com如果已经存在环境变量,不要硬编码生产环境的 URL。
错误与警告
404
404 Not Found一个错误,表示请求的页面或文件未找到。
当路由被删除、重命名或未在静态输出中生成时,可能会发生这种情况。
404 Not Found检查删除后,旧的 programming-basics URL 是否现在返回 404 错误。
错误与警告
500
500 Internal Server Error一个错误,表示服务器在处理请求时发生故障。
在开发过程中,终端或浏览器通常会显示原始错误。
500 Internal Server Error如果出现 500 错误,请检查终端错误,并确定导致错误的文件的位置。
错误与警告
Module not found
Module not found: Can't resolve '@/lib/programming'一个错误,表示导入指向一个无法找到的文件或包。
这通常发生在移动、删除或重命名文件,但没有更新导入语句之后。
Module not found: Can't resolve '@/lib/programming'查找并更新所有仍然指向已删除文件的导入。
错误与警告
Export not found
Export programmingBasicsCopy doesn't exist一个错误,表示文件存在,但请求的命名导出在该文件中不存在。
当数据对象被重命名,但导入仍然使用旧名称时,可能会发生这种情况。
Export programmingBasicsCopy doesn't exist在所有地方将旧的导出名称替换为新的名称。
错误与警告
EADDRINUSE
listen EADDRINUSE: address already in use 0.0.0.0:3001一个错误,表示另一个进程正在使用请求的主机和端口。
如果您有意要替换它,请使用另一个端口或停止现有的服务器。
listen EADDRINUSE: address already in use 0.0.0.0:3001如果出现 EADDRINUSE,请告诉我哪个端口正在使用,并使用不同的端口。
错误与警告
DeprecationWarning
[DEP0205] DeprecationWarning: module.register() is deprecated一个警告,表明 API 目前仍然有效,但可能会被删除或更改。
警告应该引起注意,但它们并不总是构建过程中的错误。
[DEP0205] DeprecationWarning: module.register() is deprecated请告诉我,这个 DeprecationWarning 是否无害,或者是否需要修改代码。
错误与警告
Hydration
Hydration failed because the server rendered HTML didn't match客户端 JavaScript 连接到服务器渲染的 HTML 的过程。
当服务器和客户端渲染不同的初始内容时,会发生不匹配错误。
Hydration failed because the server rendered HTML didn't match如果补水失败,请检查客户端上哪些组件渲染方式不同。
命令
npm run dev
npm run dev一个项目脚本,用于启动本地开发服务器。
在编辑页面和本地检查更改时,请使用它。
npm run dev运行 npm run dev,并提供本地和网络 URL。
命令
npm run build
npm run build一个项目脚本,用于创建生产构建或静态导出。
在进行更改后运行它,以确保应用程序可以成功生成。
npm run build运行 npm run build,并总结任何警告或错误。
命令
npm run lint
npm run lint一个项目脚本,用于运行代码检查。
在构建之前运行它,以便快速发现许多代码问题。
npm run lint在构建网站之前,运行 lint 工具。
命令
curl
curl -I http://localhost:3001/ko一种命令行工具,用于发送 HTTP 请求并检查响应。
curl can quickly check whether a local or deployed page responds with 200, 404, or another status.
curl -I http://localhost:3001/ko使用 curl 检查新的参考路由是否返回 200。