I was trying to see if moving my blog (based on Hugo) to Next.js was a good move (it wasn’t) and I found a problem.

I had to change the path of each of my images because Hugo allows a post to be in the same folder as the markdown file, while Next.js does not.

But I didn’t want to disrupt my workflow. It’s so nice that I can get my images in the same folder as the markdown file. It’s very easy for authoring and maintenance.

So I got this plan: at build time I’d go through all the posts, gather the images, and create a folder for each of the posts in /public/images.

I had to change each image path in the markdown, and that was the easiest thing.

Then I had to run a post-build command by creating a postbuild.mjs file whose job was to go through my content/posts folder, and copy each image in public/images:

import fs from 'fs'
import path from 'path'
import fsExtra from 'fs-extra'

const source = './content/posts'
const destination = './public/images'

fsExtra.emptyDirSync(destination)

fs.mkdir(destination, () => {
posts.map((slug) => {
if (slug === '.DS_Store') return

fs.mkdir(${destination}/${slug}, () => {
fs.readdirSync(${source}/${slug})
.filter((item) =>
['.png', '.jpg', '.jpeg', '.gif'].includes(path.extname(item))
)
.map((item) => {
fs.copyFile(
${source}/${slug}/${item}, ${destination}/${slug}/${item.replace(/ /g, '-')},
() => {
console.log(${destination}/${slug}/\${item})
}
)
})
})
})
})

Then add a postbuild entry in your package.json file scripts:

{
...
"scripts": {
"build": "next build",
"postbuild": "node ./postbuild.mjs",
"dev": "next dev",
"start": "next start",
...
}
}

Using the same technique you could create a prebuild entry that’s run before the build.

By the way this is not unique to Next.js, it’s a feature of npm. See https://docs.npmjs.com/cli/v6/using-npm/scripts#pre--post-scripts.