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;
Promise.all(
[`_redirects`, `sitemap.xml`].map((fileName) =>
fs.copyFile(`./${fileName}`, `./out/${fileName}`).then(() => fileName)
)
).then((fileNames) =>
console.log(
`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