Fix Your Broken Images! Troubleshooting Next.js Asset Loading on Azure

Is your Next.js application deployed to Azure, but your images, CSS, and JavaScript files are missing in action? You're not alone! This frustrating issue often arises due to how static assets are handled during deployment. Let's dive into a simple solution that copies the necessary folders to the Azure App Service. Using the output: 'standalone' configuration paired with a few adjustments to your Azure DevOps pipeline can resolve the issue and ensure your assets load correctly, resulting in a functioning and professional website.

The Culprit: Missing Static and Public Folders

The primary cause of this problem lies in the absence of the static and public directories within your deployed application on Azure. When Next.js builds in standalone mode, it places all necessary files for production in the .next/standalone folder. However, these static assets are not automatically included during deployment if your configuration is not correct.

The Solution: Copy Static Assets During Deployment

To resolve this, you'll need to explicitly copy these folders as part of your build process. You can accomplish this inside your azure-pipelines.yml within the Build Stage before the files are archived.

Here's the crucial snippet to add to your azure-pipelines.yml file:

- script: |
  yarn install
  yarn build
  cp -r .next/static .next/standalone/.next/static
  cp -r public .next/standalone/public
  displayName: 'yarn install and build'

Why This Works:

• cp -r .next/static .next/standalone/.next/static: Copies the entire .next/static folder, containing your optimized assets.
• cp -r public .next/standalone/public: Copies the public folder, where you likely store static assets like images and fonts.

This will effectively copy your static assets to your next standalone output directory.

Complete azure-pipelines.yml Example

Here’s the complete azure-pipelines.yml file for reference showcasing the above fix for Next.js static assets:

trigger:
  branches:
    include:
      - main

variables:
  azureSubscription: 'SubscriptionID'
  webAppName: '$(appServiceName)'
  environmentName: '$(appServiceName)'
  vmImageName: 'ubuntu-latest'

stages:
  - stage: Build
    displayName: Build stage
    jobs:
      - job: Build
        displayName: Build
        pool:
          vmImage: $(vmImageName)
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: '20.x'
            displayName: 'Install Node.js'

          - script: |
              yarn install
              yarn build
              cp -r .next/static .next/standalone/.next/static
              cp -r public .next/standalone/public
            displayName: 'yarn install and build'

          - task: ArchiveFiles@2
            displayName: 'Archive files'
            inputs:
              rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
              includeRootFolder: false
              archiveType: zip
              archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
              replaceExistingArchive: true

          - publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
            artifact: drop

  - stage: Deploy
    displayName: Deploy stage
    dependsOn: Build
    condition: succeeded()
    jobs:
      - deployment: Deploy
        displayName: Deploy
        environment: $(environmentName)
        pool:
          vmImage: $(vmImageName)
        strategy:
          runOnce:
            deploy:
              steps:
                - task: AzureWebApp@1
                  inputs:
                    azureSubscription: 'ServiceConnectionName'
                    appType: 'webAppLinux'
                    appName: '$(appServiceName)'
                    package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
                    runtimeStack: 'NODE|20-lts'

Ensure Standalone Output in next.config.mjs

Make sure you specify the output: 'standalone' in your next.config.mjs file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: 'standalone',
};
export default nextConfig;

Verify Your Package.json

Next, verify your package.json with updated scripts.

"scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "node .next/standalone/server.js",
    "lint": "next lint"
  }

Key Takeaways for Seamless Asset Loading

• Explicitly Copy: Always copy the static and public folders to the standalone output directory in your deployment pipeline.
• Standalone Output: Ensure output: 'standalone' is enabled in your next.config.js file. This optimizes your Next.js application for streamlined deployment.
• Correct Paths: Double-check that the paths in your cp commands are accurate to your project structure.

By implementing these simple steps, you'll resolve the common issue of missing assets in your Next.js Azure deployments, guaranteeing a smooth user experience with properly rendered images and styles. Addressing related long-tail keywords such as "Next.js Azure deployment images missing" and "fix Next.js static assets on Azure," ensures this article caters comprehensively to developers seeking solutions to Next.js asset loading issues.