How can I check if building (next build) is happening inside of a react server component?

[vedantroy]

I have the following server component:

import db from "@/lib/db";
import TopKPlot from "./components/topk";

export default function({ params }: { params: any }) {
  const { checkpoint } = params;
  const topK = db.getTopK(checkpoint);
  return <TopKPlot checkpoint={checkpoint} y={topK} />;
}

I would like to check (inside the component) if next build is running. The reason being, if next build is running--it looks like--next will pass in [checkpoint] as the parameter value, instead of an actual valid parameter value (which makes sense).

This causes the db.getTopK method to throw, which crashes next build.
I am wondering how to avoid this scenario.

The obvious way is to check just wrap getTopK in a try-catch, but I'm wondering if there's a more elegant solution.

More broadly, this would be useful for, e.g, avoiding loading my database when running next build. Right now, next build will result in an import of @/lib/db, but if I could check that @/lib/db was running as part of next build, then I would skip the expensive initialization step.

[teobler]

in next.config.js file, you can define a function as config, then get a variable from nextjs named phase:

module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,
    env: {
      PHASE: phase
    }
  }
}

then you can access this env variable from process.env.PHASE in your component:

import db from "@/lib/db";
import TopKPlot from "./components/topk";
import { PHASE_PRODUCTION_BUILD } from "next/constants";

export default function({ params }: { params: any }) {
  const { checkpoint } = params;
  const topK = db.getTopK(checkpoint);

  if (process.env.PHASE === PHASE_PRODUCTION_BUILD) {
    // do whatever you want
  }

  return <TopKPlot checkpoint={checkpoint} y={topK} />;
}

more info here
https://nextjs.org/docs/api-reference/next.config.js/introduction

[vedantroy]

I tried this, but this seems to be inlined. (At least it is inlined inside of my database code).
For example:

  constructor() {
    if (process.env.PHASE === PHASE_PRODUCTION_BUILD) {
      console.log(`Skipping load...`)
      this.db = null
      return
    }
}

will indeed skip loading the database during the production build, but due to inlining/replacing, it will also skip loading the database when I run next start

[icyJoseph]

While it might be tempting to do so, it is perhaps better to let this route be dynamic by using, https://beta.nextjs.org/docs/api-reference/segment-config#dynamic

export const dynamic = "force-dynamic"

This way the page will behave more like GSSP, and only render when there's a checkpoint.

You ought to handle lack of checkpoint data (at runtime) via notFound from next/navigation.

[vedantroy]

Does this mean, I need to define a layout.js file for each page.js file I want to be dynamic? (Assuming nesting & whatnot), and if this is the case, can I just create a layout.js file which only has the line export const dynamic = ..., or do I need to also have the default layout component

[bestickley]

How about:

/**
 * Check if code is running as a result of `next build`
 */
export function isNextBuild() {
  // eslint-disable-next-line turbo/no-undeclared-env-vars
  return process.env["NEXT_PHASE"] === "phase-production-build";
}

That's probably not a "public API" so could break in future but good enough for me.