In this short post I will show you how to static export yourNextra blog or documentation usingAzure Pipelines.

Introduction

To make a static export from a Next.js or a Nextra application you have to consider a few things.

The following functions of Next.js are no longer supported in a static export:

• Image Optimization (default loader)
• Internationalized Routing
• API Routes
• Rewrites
• Redirects
• Headers
• Middleware
• Incremental Static Regeneration
• fallback: true
• getServerSideProps

More information about Static HTML Export can be foundhere.

In order to continue using the image component in our code, a few adjustments are necessary. I will show you in this article how you can use the static export without problems.

Create a custom Image component

To get started we will create a new component called Image in the folder components/ with the following lines of code.

interfaceImageProps{alt?:stringsrc:string}constImage:React.FC<ImageProps>=({children,alt='Image Alt',src})=>{return(<imgalt={alt}src={(process.env.NEXT_PUBLIC_BASE_PATH||'')+src}/>)}exportdefaultImage

The component accepts two variables called alt and src. Just like in the Next.js image component, the alt tag and the image source can be defined here. In addition, an environment variable NEXT_PUBLIC_BASE_PATH is used to define the base path of your application. This is necessary to avoid errors when loading images with a static export.

Nextra Configuration

In addition to the custom image component, we also need to make the following changes in the next.config.js file.

1. Setunstable_staticImage tofalse
2. SettrailingSlash totrue
3. Set thebasePath to theNEXT_PUBLIC_BASE_PATH environment variable

With these settings the loading of images and dynamic links is also possible within the static export.

constwithNextra=require('nextra')({//Nextratheme:'nextra-theme-docs',themeConfig:'./theme.config.js',unstable_staticImage:false});constpath=require('path');module.exports=withNextra({sassOptions:{includePaths:[path.join(__dirname,'styles')],},trailingSlash:true,basePath:process.env.NEXT_PUBLIC_BASE_PATH||''});

Azure Pipeline Setup

Optionally, an Azure pipeline can be set up to automatically perform a build and static export when changes are checked into your Git repository.

This pipeline includes:

• npm package Caching
• npm build of the Nextra application
• The static export of your Nextra application
• Publish of a build artifact including your static export

stages:-stage:Buildpool:vmImage:ubuntu-latestdemands:-npmjobs:-job:BuildProjectdisplayName:Build Projectvariables:npm_config_cache:$(Pipeline.Workspace)/.npmbasePath:'/'steps:-task:Cache@2inputs:key:'npm|"$(Agent.OS)"|package-lock.json'restoreKeys:|npm | "$(Agent.OS)"path:$(npm_config_cache)displayName:Cache npm-task:NodeTool@0inputs:versionSpec:'14.x'-task:Npm@1displayName:'npminstall'inputs:command:'ci'-task:Npm@1displayName:'npmbuild'env:NEXT_PUBLIC_BASE_PATH:$(basePath)inputs:command:'custom'customCommand:'runbuild'-task:Npm@1inputs:command:'custom'customCommand:'runexport'-task:PublishBuildArtifacts@1inputs:PathtoPublish:'out'

Links

Gist
Azure DevOps
Nextra