How to buildNpmPackage with Nextjs and Google fonts?

I’m trying to package a simple web ui frontend GitHub - jakobhoeg/nextjs-ollama-llm-ui: Fully-featured, beautiful web interface for Ollama LLMs - built with NextJS. Deploy with a single click. for ollama and can’t get it to build, because that project uses nextjs, which wants to download Google fonts during the buildphase but fails because of the Nix sandbox:

{ buildNpmPackage, fetchFromGitHub, google-fonts,  ... }:

buildNpmPackage {
  pname = "nextjs-ollama-llm-ui";
  version = "1.0.1";

  src = fetchFromGitHub {
    owner = "jakobhoeg";
    repo = "nextjs-ollama-llm-ui";
    # rev = "v1.0.1";
    rev = "86c407c947ba229e71862a384001ba99a33bfe8d";
    hash = "sha256-pZJgiopm0VGwaZxsNcyRawevvzEcK1j5WhngX1Pn6YE=";
  };
  npmDepsHash = "sha256-ojhp29MPdFQ+caz7afmoh5J1W+dFy0jEKBuZTotbJB4=";

  NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"
  # see https://github.com/NixOS/nixpkgs/blob/8ee3dcb13c44ec3d72c338a504b08669a0e832f4/pkgs/by-name/cr/crabfit-frontend/package.nix
  preConfigurePhase = ''
    cp "${
      google-fonts.override { fonts = [ "Inter" ]; }
    }/share/fonts/truetype/Inter[wght].ttf" src/app/fonts/Inter.ttf
  '';
}

and i get

Running phase: buildPhase
Executing npmBuildHook

> nextjs-ollama-local-ai@0.1.0 build
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
request to https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap failed, reason: getaddrinfo EAI_AGAIN fonts.googleapis.com
    at ClientRequest.<anonymous> (/build/source/node_modules/next/dist/compiled/node-fetch/index.js:1:66160)
    at ClientRequest.emit (node:events:518:28)
    at TLSSocket.socketErrorListener (node:_http_client:500:9)
    at TLSSocket.emit (node:events:518:28)
    at emitErrorNT (node:internal/streams/destroy:169:8)
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'EAI_AGAIN',
  code: 'EAI_AGAIN'
}
Failed to compile.

src/app/layout.tsx
`next/font` error:
Failed to fetch `Inter` from Google Fonts.

> Build failed because of webpack errors

ERROR: `npm build` failed

I tried removing the import of google fonts in this layout.tsx:

import { Inter } from "next/font/google";

but that isn’t sufficient. Any ideas?

You need to use next local font. Just copy or symlink the font from nixpkgs into your src folder during build time:

If you control the source code chnage it to use local fonts.

Otherwise you could create a patch file to parch the upstream source to use local fonts

And also make sure to set $HOME to eg. $TMPDIR since nextjs tries to write some cache files.

Many thanks, that helped. I’ve added some example to Node.js - NixOS Wiki. Regarding $HOME, buildNpmPackage already sets this variable to $TMPDIR.

1 Like