Congratulations, you are ready to deploy your Next.js application to production. This document will show how to deploy either managed or self-hosted using the Next.js Build API.
next build
generates an optimized version of your application for production. This standard output includes:
getStaticProps
or Automatic Static OptimizationThis output is generated inside the .next
folder:
.next/static/chunks/pages
– Each JavaScript file inside this folder relates to the route with the same name. For example, .next/static/chunks/pages/about.js
would be the JavaScript file loaded when viewing the /about
route in your application.next/static/media
– Statically imported images from next/image
are hashed and copied here.next/static/css
– Global CSS files for all pages in your application.next/server/pages
– The HTML and JavaScript entry points prerendered from the server. The .nft.json
files are created when Output File Tracing is enabled and contain all the file paths that depend on a given page..next/server/chunks
– Shared JavaScript chunks used in multiple places throughout your application.next/cache
– Output for the build cache and cached images, responses, and pages from the Next.js server. Using a cache helps decrease build times and improve performance of loading imagesAll JavaScript code inside .next
has been compiled and browser bundles have been minified to help achieve the best performance and support all modern browsers.
Vercel is the fastest way to deploy your Next.js application with zero configuration.
When deploying to Vercel, the platform automatically detects Next.js, runs next build
, and optimizes the build output for you, including:
In addition, Vercel provides features like:
next/image
git push
Deploy a Next.js application to Vercel for free to try it out.
You can self-host Next.js with support for all features using Node.js or Docker. You can also do a Static HTML Export, which has some limitations.
Next.js は Node.js に対応しているホスティング環境であれば、どこにでもデプロイできます。 例えば、 AWS EC2 や DigitalOcean Droplet などです。
package.json
に "build"
と "start"
のスクリプトが含まれていることを確認してください。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
next build
スクリプトは .next
フォルダ内に本番用アプリケーションをビルドします。
ビルド後に実行する next start
により、静的に生成されたページとサーバーサイドでレンダリングされたページのハイブリッドページ をサポートする Node.js サーバを起動します。
Next.js can be deployed to any hosting provider that supports Docker containers. You can use this approach when deploying to container orchestrators such as Kubernetes or HashiCorp Nomad, or when running inside a single node in any cloud provider.
docker build -t nextjs-docker .
docker run -p 3000:3000 nextjs-docker
Next.js アプリを静的 HTML へと出力したい場合は、静的 HTML のエクスポートの指示に従ってください。デフォルトでは、next export
によって out
ディレクトリが生成され、 CDN や静的サイトホスティングサービスで配信できます。
When you deploy your Next.js application, you want to see the latest version without needing to reload.
Next.js will automatically load the latest version of your application in the background when routing. For client-side navigations, next/link
will temporarily function as a normal <a>
tag.
Note: If a new page (with an old version) has already been prefetched by next/link
, Next.js will use the old version. Navigating to a page that has not been prefetched (and is not cached at the CDN level) will load the latest version.
For more information on what to do next, we recommend the following sections: