An illustration of Taylor with his cat
Taylor Bryant

Move files to the root of a Next.js project

Update: As of v9.1, Next.js supports a public folder to define files to be mounted at the root of your application

Next.js is a framework built by ZEIT that allows you to easily build server-side rendered React applications. It provides automatic code splitting, simple client-side routing, and hot code reloading out of the box.

By default, Next.js only sets up routes based on files in the ./pages and ./static directories. This is sufficient in most cases, but Next.js doesn't provide a simple way to expose files like favicons or a sitemap at the root of your app. Keep reading for a simple way to move your files to the root of a Next.js project.

Add a script to your project

Create a file called move-files-to-root-directory.js in the root of your project. This script simply moves the files specified to the root directory.

const fs = require(`fs`).promises;

  [`_redirects`, `sitemap.xml`].map((fileName) =>
    fs.copyFile(`./${fileName}`, `./out/${fileName}`).then(() => fileName)
).then((fileNames) =>
    `The following files were copied to './out': ${JSON.stringify(fileNames)}`

Add a script to your package.json

Add a script to your package.json. I called it post-export, but you can call it whatever you like.

// In your package.json
  "scripts": {
    "post-export": "node move-files-to-root-directory.js"

Update your build command to use the script

Update your build command to include the new npm script.

For example, I host this website on Netlify. Before adding this script, my build command looked like:

npm run export

And after...

npm run export && npm run post-export