Theo's Typesafe Cult•11mo ago

How do I make Next App dir only run a function once? (Like getStaticProps)

Hi, I have a function called getLocalDevURL, but I can't seem to get it to properly run only once on the server, at build time. I am building an utility to generate a QR code, and for that I need to make getLocalDevURL run only once.

import { networkInterfaces } from "os";
import Image from "next/image";

import { Dialog, DialogContent, DialogTrigger } from "@kdx/ui";

function getLocalDevURL() {
  const interfaces = networkInterfaces();
  return (
    interfaces.Ethernet?.find((x) => x.family === "IPv4")?.address +
    ":" +
    "3001"
  );
}

export default function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null;

  const url = getLocalDevURL();

  return (
    <Dialog>
      <DialogTrigger asChild>
        <div className="fixed bottom-1 right-1 z-50 flex flex-row items-center space-x-1">
          <div className="bg-foreground text-background flex h-6 w-6 items-center justify-center rounded-full p-3 font-mono text-xs font-bold">
            <div className="block sm:hidden">xs</div>
            <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
              sm
            </div>
            <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">
              md
            </div>
            <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
            <div className="hidden xl:block 2xl:hidden">xl</div>
            <div className="hidden 2xl:block">2xl</div>
          </div>
        </div>
      </DialogTrigger>
      <DialogContent className="w-fit">
        <Image
          alt="QR Code"
          width={150}
          height={150}
          src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://${url}`}
        ></Image>
      </DialogContent>
    </Dialog>
  );
}

import { networkInterfaces } from "os";
import Image from "next/image";

import { Dialog, DialogContent, DialogTrigger } from "@kdx/ui";

function getLocalDevURL() {
  const interfaces = networkInterfaces();
  return (
    interfaces.Ethernet?.find((x) => x.family === "IPv4")?.address +
    ":" +
    "3001"
  );
}

export default function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null;

  const url = getLocalDevURL();

  return (
    <Dialog>
      <DialogTrigger asChild>
        <div className="fixed bottom-1 right-1 z-50 flex flex-row items-center space-x-1">
          <div className="bg-foreground text-background flex h-6 w-6 items-center justify-center rounded-full p-3 font-mono text-xs font-bold">
            <div className="block sm:hidden">xs</div>
            <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
              sm
            </div>
            <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">
              md
            </div>
            <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
            <div className="hidden xl:block 2xl:hidden">xl</div>
            <div className="hidden 2xl:block">2xl</div>
          </div>
        </div>
      </DialogTrigger>
      <DialogContent className="w-fit">
        <Image
          alt="QR Code"
          width={150}
          height={150}
          src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://${url}`}
        ></Image>
      </DialogContent>
    </Dialog>
  );
}

3 Replies

GBianchi•11mo ago

Btw, this is working. But I do not want for this getLocalDevURL function to run all the time. 🙂

steakfisher•11mo ago

u could make it a part of ur build script in package.json or if u meant the page build, if ur using pages router getStaticProps should work, else just set the revalidate time to smth ridiculously high

cje•11mo ago

use a variable instead of a function const localDevUrl = networkInterfaces().Ethernet?.find(whatever);

Gaming

Programming

How do I make Next App dir only run a function once? (Like getStaticProps)