feat: support static export (#349)

* feat: upload static export to cdn

* feat: ensure out directory

* fix: check standalone only in standalone mode

* test: add export fixture

* test: ignore out dir in test fixtures

* test: add e2e test for output export

* fix: check for undefined output config

* fix: check properly for undefined output config

Author: orinokai

.gitignore

@@ -17,3 +17,4 @@ deno.lock
 tests/**/package-lock.json
 tests/**/pnpm-lock.yaml
 tests/**/yarn.lock
+tests/**/out/

src/build/content/static.ts

@@ -57,6 +57,15 @@ export const copyStaticAssets = async (ctx: PluginContext): Promise<void> => {
   }
 }
 
+export const copyStaticExport = async (ctx: PluginContext): Promise<void> => {
+  try {
+    await rm(ctx.staticDir, { recursive: true, force: true })
+    await cp(ctx.resolveFromSiteDir('out'), ctx.staticDir, { recursive: true })
+  } catch (error) {
+    ctx.failBuild('Failed copying static export', error)
+  }
+}
+
 /**
  * Swap the static dir with the publish dir so it is uploaded to the CDN
  */

src/build/verification.ts

@@ -34,11 +34,21 @@ export function verifyPublishDir(ctx: PluginContext) {
       'Your publish directory does not contain expected Next.js build output, please check your build settings',
     )
   }
-  if (!existsSync(ctx.standaloneRootDir)) {
+  if (
+    (ctx.buildConfig.output === 'standalone' || ctx.buildConfig.output === undefined) &&
+    !existsSync(ctx.standaloneRootDir)
+  ) {
     ctx.failBuild(
       `Your publish directory does not contain expected Next.js build output, please make sure you are using Next.js version (${SUPPORTED_NEXT_VERSIONS})`,
     )
   }
+  if (ctx.buildConfig.output === 'export' && !existsSync(ctx.resolveFromSiteDir('out'))) {
+    ctx.failBuild(
+      `Your export directory was not found at: ${ctx.resolveFromSiteDir(
+        'out',
+      )}, please check your build settings`,
+    )
+  }
 }
 
 export function verifyNextVersion(ctx: PluginContext, nextVersion: string): void | never {

src/index.ts

@@ -5,6 +5,7 @@ import { copyPrerenderedContent } from './build/content/prerendered.js'
 import {
   copyStaticAssets,
   copyStaticContent,
+  copyStaticExport,
   publishStaticDir,
   unpublishStaticDir,
 } from './build/content/static.js'
@@ -32,6 +33,11 @@ export const onBuild = async (options: NetlifyPluginOptions) => {
     await saveBuildCache(ctx)
   }
 
+  // static exports only need to be uploaded to the CDN
+  if (ctx.buildConfig.output === 'export') {
+    return copyStaticExport(ctx)
+  }
+
   await Promise.all([
     copyStaticAssets(ctx),
     copyStaticContent(ctx),

tests/e2e/simple-app.test.ts

@@ -1,4 +1,4 @@
-import { type Locator, expect } from '@playwright/test'
+import { expect, type Locator } from '@playwright/test'
 import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
 import { test } from '../utils/playwright-helpers.js'
 
@@ -7,10 +7,13 @@ const expectImageWasLoaded = async (locator: Locator) => {
 }
 
 test('Renders the Home page correctly', async ({ page, simpleNextApp }) => {
-  await page.goto(simpleNextApp.url)
+  const response = await page.goto(simpleNextApp.url)
+  const headers = response?.headers() || {}
 
   await expect(page).toHaveTitle('Simple Next App')
 
+  expect(headers['cache-status']).toBe('"Next.js"; hit\n"Netlify Edge"; fwd=miss')
+
   const h1 = page.locator('h1')
   await expect(h1).toHaveText('Home')
 
@@ -22,6 +25,23 @@ test('Renders the Home page correctly', async ({ page, simpleNextApp }) => {
   expect(body).toBe('{"words":"hello world"}')
 })
 
+test('Renders the Home page correctly with output export', async ({
+  page,
+  simpleNextAppExport,
+}) => {
+  const response = await page.goto(simpleNextAppExport.url)
+  const headers = response?.headers() || {}
+
+  await expect(page).toHaveTitle('Simple Next App')
+
+  expect(headers['cache-status']).toBe('"Netlify Edge"; fwd=miss')
+
+  const h1 = page.locator('h1')
+  await expect(h1).toHaveText('Home')
+
+  await expectImageWasLoaded(page.locator('img'))
+})
+
 test('Renders the Home page correctly with distDir', async ({ page, simpleNextAppDistDir }) => {
   await page.goto(simpleNextAppDistDir.url)
 

tests/fixtures/simple-next-app-export/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Simple Next App',
+  description: 'Description for Simple Next App',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

tests/fixtures/simple-next-app-export/app/page.js

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main>
+      <h1>Home</h1>
+      <img src="/squirrel.jpg" alt="a cute squirrel" width="300px" />
+    </main>
+  )
+}

tests/fixtures/simple-next-app-export/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig

tests/fixtures/simple-next-app-export/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "simple-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "next build",
+    "dev": "next dev",
+    "build": "next build"
+  },
+  "dependencies": {
+    "next": "^14.1.1-canary.66",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

tests/fixtures/simple-next-app-export/public/next.svg

@@ -2,7 +2,7 @@ import { execaCommand } from 'execa'
 import fg from 'fast-glob'
 import { exec } from 'node:child_process'
 import { existsSync } from 'node:fs'
-import { appendFile, copyFile, mkdir, mkdtemp, readFile, writeFile, rm } from 'node:fs/promises'
+import { appendFile, copyFile, mkdir, mkdtemp, readFile, rm } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import { dirname, join } from 'node:path'
 import process from 'node:process'
@@ -272,6 +272,7 @@ async function cleanup(dest: string, deployId?: string): Promise<void> {
 
 export const fixtureFactories = {
   simpleNextApp: () => createE2EFixture('simple-next-app'),
+  simpleNextAppExport: () => createE2EFixture('simple-next-app-export'),
   simpleNextAppDistDir: () =>
     createE2EFixture('simple-next-app-dist-dir', {
       publishDirectory: 'cool/output',