Walkthrough: Using next export
with the Next.js Sample Application
You can serve your JSS Next.js application as static HTML files using any static hosting service or content delivery network.
Static HTML export does not support:
- Internationalized routing.
- Request rewrites.
- Visitor identification.
- Exporting the Sitecore Media Library. You still need a running Content Delivery instance for the media library.
- The default image
loader
used by thenext/image
component.See the Next.js Static HTML Export Caveats documentation for more information.
To export your JSS Next.js application as static HTML files, you must:
- Prepare your application for static HTML export.
- Export the application
Prepare your application for static HTML export
Before exporting your application, you must:
Remove internationalization configuration:
- In
next.config.js
, delete thei18n
configuration. - In
package.json
, delete any language configuration underconfig.language
.
- In
In
next.config.js
, removerewrites
.In
JssNextWeb.config
:- Include the Sitecore server URL as part of the media requests:
<IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>
- Or remove the
<IncludeServerUrlInMediaUrls>
configuration patch:
<layoutService> <configurations> <config name="jss"> <rendering> <renderingContentsResolver> <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls> </renderingContentsResolver> </rendering> </config> </configurations> </layoutService>
- Run
jss deploy config
.
Remove usage of
<VisitorIdentification />
component insrc/components/Layout.tsx
.In
.env
, define thePUBLIC_URL
variable.In
package.json
, add the following scripts:"next:export": "next export"
.When using content from Sitecore ("Connected Mode"):
"export:connected": "cross-env-shell EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""
.When using content from local files ("Disconnected Mode"):
"export": "cross-env-shell JSS_MODE=disconnected PORT=3042 EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""
.Replace the
PORT
value with the port of your disconnected server.
For disconnected mode only, run
jss start:disconnected-proxy
. During the build stage, Next.js will fetch the required data (layout, dictionary, sitemap) from your disconnected server.
Export the application
- Run the
jss export
orjss export:connected
script. The script will place the files in theout
directory.