Skip to content

How to run a script build time in Next.js

New Courses Coming Soon

Join the waiting lists

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'

const posts = fs.readdirSync(source)


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

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

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—post-scripts.

Here is how can I help you: