程式設計
了解本機開發伺服器、網路 URL、port、build、部署、警告與常見 Web 錯誤。
42 個項目
本機開發
localhost
http://localhost:3001A hostname that points back to the same computer that is running the browser or command.
Use localhost when checking the site on the same Mac or PC where the dev server is running.
A phone or tablet has its own localhost, so it cannot use your Mac's localhost address.
http://localhost:3001Open the local site at localhost and check the new reference page.
本機開發
127.0.0.1
http://127.0.0.1:3001A loopback IP address that also points to the same local computer.
It is often interchangeable with localhost for same-device testing.
http://127.0.0.1:3001Try 127.0.0.1 if localhost does not resolve correctly.
本機開發
Dev server
npm run devA server used while developing, with fast rebuilds and development-only features.
Use it to preview changes before building or deploying the site.
Dev server behavior is not always identical to deployed production behavior.
npm run devStart the dev server so I can check the page on my iPhone.
本機開發
Port
http://localhost:3001A number that identifies which server process should receive the connection on a machine.
If one server uses port 3001, another server must use a different port such as 3002.
http://localhost:3001If port 3001 is already in use, start the dev server on another port.
本機開發
Local URL
Local: http://localhost:3001The address used from the same device where the dev server is running.
Use Local URL for desktop browser checks on the development machine.
Local: http://localhost:3001Tell me the Local URL after starting the dev server.
網路存取
Network URL
Network: http://172.30.1.55:3001An address other devices on the same network can use to reach the dev server.
Use it when checking the site from an iPhone, iPad, or another computer on the same Wi-Fi.
The dev server must listen on a network-accessible host such as 0.0.0.0.
Network: http://172.30.1.55:3001Start the dev server with a Network URL so I can test it on my iPad.
網路存取
IP address
172.30.1.55A numeric address that identifies a device on a network.
A LAN IP lets another device on the same Wi-Fi reach your dev server.
Local network IPs can change when Wi-Fi or router conditions change.
172.30.1.55Use the current LAN IP when adding allowedDevOrigins for device testing.
網路存取
Host
--hostname 0.0.0.0The address a server binds to when it starts listening for requests.
Binding to 0.0.0.0 allows the dev server to be reachable from other devices on the network.
--hostname 0.0.0.0Run the dev server with hostname 0.0.0.0 for phone testing.
網路存取
Same network
Mac and iPhone on the same Wi-FiDevices connected to the same local network, usually the same Wi-Fi router.
A phone can reach your Mac's dev server only when network settings allow it.
Mac and iPhone on the same Wi-FiCheck that the iPhone and Mac are on the same network before debugging the site.
Next.js 行為
allowedDevOrigins
allowedDevOrigins: ['172.30.1.55']A Next.js development setting that allows specific origins to access development resources.
It can be needed when testing a Next dev server from a phone or tablet using a LAN IP.
This is a development setting. Deployed static sites do not use the same dev-resource access path.
allowedDevOrigins: ['172.30.1.55']Add my current LAN IP to allowedDevOrigins for development testing.
網路存取
Cross-origin
Blocked cross-origin requestA request between different origins, where scheme, host, or port differs.
Development tools may block cross-origin access to sensitive dev resources by default.
Blocked cross-origin requestExplain whether this cross-origin warning affects production deployment.
Next.js 行為
HMR
/_next/webpack-hmrHot Module Replacement updates the browser during development without a full reload.
If HMR dev resources are blocked, the page may load but interactive updates or scripts can behave strangely in development.
HMR is development-only and is not part of the final static export.
/_next/webpack-hmrCheck whether the iPhone issue is caused by blocked HMR dev resources.
Next.js 行為
Turbopack
Next.js 16.2.5 (Turbopack)A bundler used by Next.js for development and build workflows.
You may see its name in dev server or build output.
Next.js 16.2.5 (Turbopack)Summarize the Turbopack output and tell me whether the build succeeded.
Next.js 行為
App Router
src/app/[locale]/reference/page.tsxThe Next.js routing system based on the app directory.
Adding a page.tsx file under a folder creates a route.
src/app/[locale]/reference/page.tsxAdd the new reference page using the App Router folder structure.
Next.js 行為
generateStaticParams
generateStaticParams()A Next.js function that declares which dynamic routes should be generated at build time.
Locale pages use it to create /en, /ko, /ja, and other language paths.
generateStaticParams()Make sure the new reference page has generateStaticParams for all locales.
建置與輸出
Build
npm run buildThe process that compiles and prepares the site for production or static output.
Run build before deployment to catch TypeScript, route, and static generation problems.
npm run buildRun the build and confirm the new route is generated.
建置與輸出
Lint
npm run lintA static code check that catches style, correctness, and framework-rule issues.
Lint is a quick check before build or commit.
npm run lintRun lint after editing the reference pages.
建置與輸出
Static export
output: "export"A build output where pages are generated as static files instead of needing a running server.
Static export is useful for hosting sites as prebuilt HTML, CSS, and JavaScript files.
Some server-only features do not work with static export.
output: "export"Keep the new page compatible with static export.
建置與輸出
SSG
● (SSG) prerendered as static HTMLStatic Site Generation creates pages at build time.
Reference pages with generateStaticParams are generated for each locale during build.
● (SSG) prerendered as static HTMLConfirm that the reference route appears as SSG in the build output.
建置與輸出
Prerender
prerendered as static contentRendering a page before a user requests it, usually during build.
Prerendered pages load fast because HTML already exists.
prerendered as static contentCheck that all locale pages are prerendered successfully.
建置與輸出
Bundle
static JS bundleCompiled files that combine code and dependencies for the browser.
Large bundles can affect load speed and should be watched as the site grows.
static JS bundleAvoid adding a heavy library just for a simple reference page.
部署
Deploy
deploy static outputPublishing the built site so users can access it on the web.
Deployment happens after local checks, lint, and build pass.
deploy static outputDo not deploy yet; just prepare the page and run build.
部署
Production
production deploymentThe real deployed environment that users access.
Production should be tested differently from the local dev server because dev-only features are absent.
production deploymentExplain whether this warning affects production or only development.
部署
Hosting
static hosting providerThe service or server that stores and serves the deployed site files.
Static export can be served by static hosting when server logic is not required.
static hosting providerMake sure the output works on static hosting.
部署
Domain
example.comThe human-readable address users type to reach a site.
A domain points to the deployed hosting location through DNS.
example.comDo not hard-code localhost in links that should work on the production domain.
部署
DNS
A record / CNAME recordThe system that maps a domain name to the server or hosting target.
DNS must be configured correctly for a custom domain to reach the deployed site.
A record / CNAME recordExplain whether the issue is a DNS problem or an app build problem.
部署
Cache
clear browser cacheStored copies of files or responses used to load pages faster.
After deployment, old cached files can make a browser show a previous version for a while.
clear browser cacheCheck whether the old page is still showing because of cache.
執行環境
Node.js
node --versionA JavaScript runtime used to run development tools, build scripts, and servers.
Next.js dev and build commands run on Node.js.
node --versionTell me whether this warning comes from Node.js, Next.js, or my app code.
執行環境
npm
npm run buildA package manager and script runner commonly used in JavaScript projects.
package.json defines scripts such as dev, lint, and build that npm can run.
npm run buildRun the npm build script and summarize the result.
執行環境
package.json
"scripts": { "dev": "next dev -p 3001" }A project file that defines scripts, dependencies, and package metadata.
Check package.json to know which commands the project expects you to run.
"scripts": { "dev": "next dev -p 3001" }Check package.json before deciding which dev command to run.
執行環境
Environment variable
NEXT_PUBLIC_SITE_URL=https://example.comA value supplied to the app or build environment outside the source code.
Environment variables are used for site URLs, API keys, and deployment-specific settings.
Secrets should not be exposed through public client-side variables.
NEXT_PUBLIC_SITE_URL=https://example.comDo not hard-code the production site URL if an environment variable already exists.
錯誤與警告
404
404 Not FoundAn error meaning the requested page or file was not found.
It can happen when a route was deleted, renamed, or not generated in static output.
404 Not FoundCheck whether the old programming-basics URL now returns 404 after removal.
錯誤與警告
500
500 Internal Server ErrorAn error meaning the server failed while handling the request.
In development, the terminal or browser overlay usually shows the source error.
500 Internal Server ErrorIf a 500 appears, inspect the terminal error and identify the failing file.
錯誤與警告
Module not found
Module not found: Can't resolve '@/lib/programming'An error meaning an import points to a file or package that cannot be found.
It often happens after moving, deleting, or renaming files without updating imports.
Module not found: Can't resolve '@/lib/programming'Find and update any imports that still point to the removed file.
錯誤與警告
Export not found
Export programmingBasicsCopy doesn't existAn error meaning a file exists, but the requested named export is not provided by that file.
It can happen when a data object is renamed but imports still use the old name.
Export programmingBasicsCopy doesn't existReplace the old export name with the new one everywhere.
錯誤與警告
EADDRINUSE
listen EADDRINUSE: address already in use 0.0.0.0:3001An error meaning another process is already using the requested host and port.
Use another port or stop the existing server if you intentionally want to replace it.
listen EADDRINUSE: address already in use 0.0.0.0:3001If EADDRINUSE appears, tell me which port is busy and use a different one.
錯誤與警告
DeprecationWarning
[DEP0205] DeprecationWarning: module.register() is deprecatedA warning that an API still works now but may be removed or changed later.
Warnings should be noticed, but they are not always build-blocking errors.
[DEP0205] DeprecationWarning: module.register() is deprecatedTell me whether this DeprecationWarning is harmless or requires a code change.
錯誤與警告
Hydration
Hydration failed because the server rendered HTML didn't matchThe process where client-side JavaScript connects to server-rendered HTML.
Mismatch errors happen when server and client render different initial content.
Hydration failed because the server rendered HTML didn't matchIf hydration fails, check which component renders differently on the client.
指令
npm run dev
npm run devA project script that starts the local development server.
Use it while editing pages and checking changes locally.
npm run devRun npm run dev and give me the Local and Network URLs.
指令
npm run build
npm run buildA project script that creates the production build or static export.
Run it after changes to ensure the app can be generated successfully.
npm run buildRun npm run build and summarize any warnings or failures.
指令
npm run lint
npm run lintA project script that runs lint checks.
Run it before build to catch many code issues quickly.
npm run lintRun lint before building the site.
指令
curl
curl -I http://localhost:3001/koA command-line tool for making HTTP requests and checking responses.
curl can quickly check whether a local or deployed page responds with 200, 404, or another status.
curl -I http://localhost:3001/koUse curl to check whether the new reference route returns 200.