Write HTML pages to out/ instead of public/

Rather than polluting the public/ directory (and potentially overwriting 
files), build HTML and static files to the out/ folder. Files and 
folders inside public/ are copied to out/.

The out/ folder is consistent with the folder created by next export.

Author: FinnWoelm

README.md

@@ -63,7 +63,7 @@ We're almost done! We just have to tell Netlify how to build our NextJS app, whe
 [build]
   command   = "npm run build"
   functions = "functions"
-  publish   = "public"
+  publish   = "out"
 ```
 
 We're done. Let's deploy 🚀🚀🚀
@@ -92,7 +92,7 @@ Then, add the following `[dev]` block to your `netlify.toml`:
 
 [dev]
   functions = "functions"
-  publish   = "public"
+  publish   = "out"
   # We manually set the framework to static, otherwise Netlify automatically
   # detects NextJS and redirects do not work.
   # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
@@ -106,8 +106,7 @@ Lastly, add the following lines to your `.gitignore`:
 
 # Files generated by next-on-netlify command
 functions/nextRouter
-public/_next
-public/_redirects
+out/
 ```
 
 Now you're all set.
@@ -118,9 +117,7 @@ From now on, whenever you want to preview your application locally, just run:
 
 #### Add Custom Redirects
 
-next-on-netlify defines redirects in `public/_redirects`. Do not manually add redirects there or they will be overwritten the next time you run `next-on-netlify`.
-
-Instead, you can define redirects in a `_redirects` file at the root level. These will be merged into the `public/_redirects` when you run `next-on-netlify`.
+You can define custom redirects in a `_redirects` file in the `public/` folder. When you run `next-on-netlify`, your redirects will be merged with the redirects defined by `next-on-netlify`. Note that your redirects take priority.
 
 Or you can define custom redirects in the `netlify.toml` file.
 

cypress/fixtures/netlify.toml

@@ -1,12 +1,12 @@
 [build]
   command     = "npm run build"
   functions   = "functions"
-  publish     = "public"
+  publish     = "out"
 
 [dev]
   # We manually set the framework to static, otherwise Netlify automatically
   # detects NextJS and redirects do not work.
   # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
   framework   = "#static"
   functions   = "functions"
-  publish     = "public"
+  publish     = "out"

next-on-netlify.js

@@ -3,7 +3,7 @@
 const { copySync, emptyDirSync,
         existsSync, readFileSync,
         writeFileSync, writeJsonSync } = require('fs-extra')
-const { join }                         = require('path')
+const { join, relative }               = require('path')
 const collectNextjsPages               = require('./lib/collectNextjsPages')
 const getNextDistDir                   = require('./lib/getNextDistDir')
 
@@ -13,11 +13,15 @@ const NEXT_CONFIG_PATH      = join(".", "next.config.js")
 // Path to the folder that NextJS builds to
 const NEXT_DIST_DIR         = getNextDistDir({ nextConfigPath: NEXT_CONFIG_PATH })
 // Path to Netlify functions folder
-const FUNCTIONS_PATH        = join(".", "functions")
+const FUNCTIONS_PATH        = join(".", "functions/")
+// Path to output folder (same as `next export`)
+// This is where next-on-netlify will place all static files.
+// The publish key in netlify.toml should point to this folder.
+const OUTPUT_PATH           = join(".", "out/")
 // Path to public folder
-const PUBLIC_PATH           = join(".", "public")
+const PUBLIC_PATH           = join(".", "public/")
 // Path to user-defined redirects
-const USER_REDIRECTS_PATH   = join(".", "_redirects")
+const USER_REDIRECTS_PATH   = join(PUBLIC_PATH, "_redirects")
 // Path to the router template
 const ROUTER_TEMPLATE_PATH  = join(__dirname, "lib", "routerTemplate.js")
 
@@ -91,38 +95,54 @@ writeFileSync(
 
 // 3. HTML Setup
 
-// 3.1 HTML Setup: Clean existing _next folder
-emptyDirSync(
-  join(PUBLIC_PATH, "_next")
-)
+// 3.1 HTML Setup: Clean existing output folder
+emptyDirSync(OUTPUT_PATH)
+
+// 3.2 HTML Setup: Copy files from public folder to output path
+if(existsSync(PUBLIC_PATH))
+  copySync(PUBLIC_PATH, OUTPUT_PATH)
 
-// 3.2 HTML Setup: Copy HTML pages to public/_next/pages
+// 3.3 HTML Setup: Copy HTML pages to the output folder
 // These are static, so they do not need to be handled by our nextRouter.
-htmlPages.forEach(({ file }) => (
+htmlPages.forEach(({ file }) => {
+  // The path to the file, relative to the pages directory
+  const relativePath = relative("pages", file)
+
   copySync(
-    join(NEXT_DIST_DIR, "serverless", file),
-    join(PUBLIC_PATH,   "_next",      file)
+    join(NEXT_DIST_DIR, "serverless", "pages",relativePath),
+    join(OUTPUT_PATH,   relativePath),
+    {
+      overwrite: false,
+      errorOnExist: true
+    }
   )
-))
+})
 
 
 // 4. Prepare NextJS static assets
-// Copy the NextJS' static assets from /.next/static to /public/_next/static.
+// Copy the NextJS' static assets from /.next/static to /out/_next/static.
 // These need to be available for NextJS to work.
 copySync(
   join(NEXT_DIST_DIR, "static"),
-  join(PUBLIC_PATH,   "_next",  "static")
+  join(OUTPUT_PATH,   "_next",  "static"),
+  {
+    overwrite: false,
+    errorOnExist: true
+  }
 )
 
 
 // 5. Generate the _redirects file
 // These redirects route all requests to the appropriate location: Either the
 // nextRouter Netlify function or one of our static HTML pages. They are merged
-// with the _redirects file at the root level, so you can still define your
-// custom redirects.
-const htmlRedirects = htmlPages.map(({ route, file }) => (
-  `${route}  /_next/${file}  200`
-))
+// with the _redirects file from the public/ folder, so you can still define
+// your custom redirects.
+const htmlRedirects = htmlPages.map(({ route, file }) => {
+  // The path to the file, relative to the pages directory
+  const relativePath = relative("pages", file)
+
+  return `${route}  /${relativePath}  200`
+})
 const ssrRedirects = ssrPages.map(({ route }) => (
   `${route}  /.netlify/functions/${ROUTER_FUNCTION_NAME}  200`
 ))
@@ -135,7 +155,7 @@ if(existsSync(USER_REDIRECTS_PATH)) {
 }
 
 writeFileSync(
-  join(PUBLIC_PATH, "_redirects"),
+  join(OUTPUT_PATH, "_redirects"),
   userRedirects         + "\n\n"  +
   "# Next-on-Netlify Redirects"  + "\n"    +
   nextjsRedirects

tests/customNextDistDir.test.js

@@ -154,33 +154,34 @@ describe('API Pages', () => {
 })
 
 describe('Static Pages', () => {
-  test('copies static pages to public/_next/ directory', () => {
-    const pages = join(PROJECT_PATH, "public", "_next", "pages")
+  test('copies static pages to output directory', () => {
+    const OUTPUT_PATH = join(PROJECT_PATH, "out")
 
-    expect(existsSync(join(pages, "static.html"))).toBe(true)
-    expect(existsSync(join(pages, "static/[id].html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "static.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "static/[id].html"))).toBe(true)
   })
 
-  test('copies static assets to public/_next/ directory', () => {
-    const dirs = readdirSync(join(PROJECT_PATH, "public", "_next", "static"))
+  test('copies static assets to out/_next/ directory', () => {
+    const dirs = readdirSync(join(PROJECT_PATH, "out", "_next", "static"))
 
     expect(dirs.length).toBe(3)
     expect(dirs).toContain("chunks")
     expect(dirs).toContain("runtime")
   })
 })
 
+
 describe('Routing',() => {
   test('creates Netlify redirects', async () => {
     // Read _redirects file
-    const contents = readFileSync(join(PROJECT_PATH, "public", "_redirects"))
+    const contents = readFileSync(join(PROJECT_PATH, "out", "_redirects"))
 
     // Convert contents into an array, each line being one element
     const redirects = contents.toString().split("\n")
 
     // Check that routes are present
-    expect(redirects).toContain("/static  /_next/pages/static.html  200")
-    expect(redirects).toContain("/static/:id  /_next/pages/static/[id].html  200")
+    expect(redirects).toContain("/static  /static.html  200")
+    expect(redirects).toContain("/static/:id  /static/[id].html  200")
     expect(redirects).toContain("/  /.netlify/functions/nextRouter  200")
     expect(redirects).toContain("/index  /.netlify/functions/nextRouter  200")
     expect(redirects).toContain("/shows/:id  /.netlify/functions/nextRouter  200")

tests/defaults.test.js

@@ -41,6 +41,12 @@ beforeAll(
       join(PROJECT_PATH, "package.json")
     )
 
+    // Copy image.png to public folder
+    copySync(
+      join(FIXTURE_PATH, "image.png"),
+      join(PROJECT_PATH, "public", "image.png")
+    )
+
     // Invoke `npm run build`: Build Next and run next-on-netlify
     const { stdout } = await npmRunBuild({ directory: PROJECT_PATH })
     BUILD_OUTPUT = stdout
@@ -154,33 +160,41 @@ describe('API Pages', () => {
 })
 
 describe('Static Pages', () => {
-  test('copies static pages to public/_next/ directory', () => {
-    const pages = join(PROJECT_PATH, "public", "_next", "pages")
+  test('copies static pages to output directory', () => {
+    const OUTPUT_PATH = join(PROJECT_PATH, "out")
 
-    expect(existsSync(join(pages, "static.html"))).toBe(true)
-    expect(existsSync(join(pages, "static/[id].html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "static.html"))).toBe(true)
+    expect(existsSync(join(OUTPUT_PATH, "static/[id].html"))).toBe(true)
   })
 
-  test('copies static assets to public/_next/ directory', () => {
-    const dirs = readdirSync(join(PROJECT_PATH, "public", "_next", "static"))
+  test('copies static assets to out/_next/ directory', () => {
+    const dirs = readdirSync(join(PROJECT_PATH, "out", "_next", "static"))
 
     expect(dirs.length).toBe(3)
     expect(dirs).toContain("chunks")
     expect(dirs).toContain("runtime")
   })
 })
 
+describe('Public assets', () => {
+  test('copies public files to output directory', () => {
+    const OUTPUT_PATH = join(PROJECT_PATH, "out")
+
+    expect(existsSync(join(OUTPUT_PATH, "image.png"))).toBe(true)
+  })
+})
+
 describe('Routing',() => {
   test('creates Netlify redirects', async () => {
     // Read _redirects file
-    const contents = readFileSync(join(PROJECT_PATH, "public", "_redirects"))
+    const contents = readFileSync(join(PROJECT_PATH, "out", "_redirects"))
 
     // Convert contents into an array, each line being one element
     const redirects = contents.toString().split("\n")
 
     // Check that routes are present
-    expect(redirects).toContain("/static  /_next/pages/static.html  200")
-    expect(redirects).toContain("/static/:id  /_next/pages/static/[id].html  200")
+    expect(redirects).toContain("/static  /static.html  200")
+    expect(redirects).toContain("/static/:id  /static/[id].html  200")
     expect(redirects).toContain("/  /.netlify/functions/nextRouter  200")
     expect(redirects).toContain("/index  /.netlify/functions/nextRouter  200")
     expect(redirects).toContain("/shows/:id  /.netlify/functions/nextRouter  200")