Next.js & Nextra static export example + Azure Pipelines YML

azure-pipelines.yml

stages:
- stage: Build
  pool:
    vmImage: ubuntu-latest
    demands:
      - npm
  jobs:
  - job: BuildProject
    displayName: Build Project
    variables:
      npm_config_cache: $(Pipeline.Workspace)/.npm
      basePath: '/'
    steps:
    - task: Cache@2
      inputs:
        key: 'npm | "$(Agent.OS)" | package-lock.json'
        restoreKeys: |
          npm | "$(Agent.OS)"
        path: $(npm_config_cache)
      displayName: Cache npm
    - task: NodeTool@0
      inputs:
        versionSpec: '14.x'
    - task: Npm@1
      displayName: 'npm install'
      inputs:
        command: 'ci'
    - task: Npm@1
      displayName: 'npm build'
      env:
        NEXT_PUBLIC_BASE_PATH: $(basePath)
      inputs:
        command: 'custom'
        customCommand: 'run build'
    - task: Npm@1
      inputs:
        command: 'custom'
        customCommand: 'run export'
    - task: PublishBuildArtifacts@1
      inputs:
        PathtoPublish: 'out'

image.tsx

interface ImageProps {
    alt?: string
    src: string
}

const Image: React.FC<ImageProps> = ({
    children,
    alt = 'Image Alt',
    src
}) => {
    return (
        <img alt={alt} src={(process.env.NEXT_PUBLIC_BASE_PATH || '') + src} />
    )
}

export default Image

next.config.js

const withNextra = require('nextra')({
  //Nextra
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.js',
  unstable_staticImage: false
});
const path = require('path');

module.exports = withNextra({
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  trailingSlash: true,
  basePath: process.env.NEXT_PUBLIC_BASE_PATH || ''
});