create-next-app: Failed to fetch Inter from Google Fonts.

[bbigras]

next build builds fine but not with nix build

# all defaults choices
pnpm create next-app
cd my-app
nix build

❯ nix build
warning: Git tree '/home/bbigras/dev/my-app' is dirty
error: builder for '/nix/store/3jgw9d6ih2bfdvzmdfq0sw8fh0lx4wnx-my-app-0.1.0.drv' failed with exit code 1;
       last 25 log lines:
       >
       > Retrying 3/3...
FetchError: request to https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap failed, reason: getaddrinfo EAI_AGAIN fonts.googleapis.com
       >     at ClientRequest.<anonymous> (/nix/store/c0x94spjxx24r7xx24zby3myybxwizmv-my-app-0.1.0-node-modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/node-fetch/index.js:1:66160)
       >     at ClientRequest.emit (node:events:517:28)
       >     at ClientRequest.emit (node:domain:489:12)
       >     at TLSSocket.socketErrorListener (node:_http_client:501:9)
       >     at TLSSocket.emit (node:events:517:28)
       >     at TLSSocket.emit (node:domain:489:12)
       >     at emitErrorNT (node:internal/streams/destroy:151:8)
       >     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
       >     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
       >   type: 'system',
       >   errno: 'EAI_AGAIN',
       >   code: 'EAI_AGAIN'
       > }
Failed to compile.
       >
app/layout.tsx
       > `next/font` error:
       > Failed to fetch `Inter` from Google Fonts.


> Build failed because of webpack errors
       >    Creating an optimized production build  . ELIFECYCLE  Command failed with exit code 1.
       For full logs, run 'nix log /nix/store/3jgw9d6ih2bfdvzmdfq0sw8fh0lx4wnx-my-app-0.1.0.drv'.

flake.nix

{
  description = "my-app";

  nixConfig = {
    extra-substituters = [
      "https://nix-community.cachix.org"
    ];
    extra-trusted-public-keys = [
      "nix-community.cachix.org-1:mB9FSh9qf2dCimDSUo8Zy7bkq5CX+/rkCWyvRCYg3Fs="
    ];
  };

  inputs = {
    nixpkgs.url = "nixpkgs/nixpkgs-unstable";
    flake-parts = {
      url = "flake-parts";
      inputs.nixpkgs-lib.follows = "nixpkgs";
    };
    pnpm2nix = {
      url = "github:nzbr/pnpm2nix-nzbr";
      inputs = {
        nixpkgs.follows = "nixpkgs";
      };
    };
  };

  outputs = inputs@{ flake-parts, pnpm2nix, ... }: flake-parts.lib.mkFlake { inherit inputs; } {
    systems = [
      "x86_64-linux"
    ];

    perSystem = { system, ... }:
      let
        app-tech = import ./front.nix {
          inherit (pnpm2nix.packages.${system}) mkPnpmPackage;
        };
      in
      {
        packages = {
          default = app-tech;
        };
      };
  };
}

front.nix

{ mkPnpmPackage, ... }:

mkPnpmPackage {
  src = ./.;
}

[bbigras]

Any ideas?

[nzbr]

One of your dependencies (it looks like @next/font) tries to download the font as part of the build process. The nix build sandbox blocks network access however, so this fails. You need to somehow convince it to use an already downloaded copy of the font (you can get that from nixpkgs as pkgs.inter).
Or you include it as a local font and install the font files itself through npm

[body20002]

adding __noChroot = true to mkPnpmPackage seems to give internet access I can use ping
but for some reason I get https certificate error not sure why

here's the flake.nix

{
  description = "Test Flake";

  inputs = {
    nixpkgs.url = "nixpkgs";
    systems.url = "github:nix-systems/x86_64-linux";
    flake-utils = {
      url = "github:numtide/flake-utils";
      inputs.systems.follows = "systems";
    };
    pnpm2nix = {
      url = "github:nzbr/pnpm2nix-nzbr";
      inputs.nixpkgs.follows = "nixpkgs";
    };
  };

  outputs = { nixpkgs, flake-utils, ... }@inputs:
    flake-utils.lib.eachDefaultSystem (system:
      let
        pkgs = nixpkgs.legacyPackages.${system};
        pname = "test-flake";
        version = "0.1.0";
        buildInputs = with pkgs; [
          nodejs_20
          nodePackages_latest.pnpm
        ];
      in
      {
        devShells.default = pkgs.mkShell {
          inherit buildInputs;
          shellHook = ''
            #!/usr/bin/env bash
          '';
        };
        packages.default = inputs.pnpm2nix.packages.${system}.mkPnpmPackage {
          __noChroot = true; # disable nix sandbox to get internet access
          inherit pname version;
          src = ./.;
          # uncomment to test ping or pnpm build
          buildPhase = ''
          # ${pkgs.pkgs.unixtools.ping}/bin/ping 8.8.8.8
          # pnpm run build
          '';
        };
      });
}

in order to use __noChroot you have to set nix.settings.sandbox = "relaxed" and build your system

[body20002]

Error log:

> next build

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

   ▲ Next.js 14.1.4

   Creating an optimized production build ...
request to https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap failed, reason: unable to get local issuer certificate

Retrying 1/3...
request to https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap failed, reason: unable to get local issuer certificate

Retrying 2/3...
request to https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap failed, reason: unable to get local issuer certificate

Retrying 3/3...
FetchError: request to https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap failed, reason: unable to get local issuer certificate
    at ClientRequest.<anonymous> (/nix/store/n4rzfg89chlgws0gkk1x79ipij7fkz3w-test-flake-0.1.0-node-modules/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/node-fetch/index.js:1:66160)
    at ClientRequest.emit (node:events:518:28)
    at TLSSocket.socketErrorListener (node:_http_client:495: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: 'UNABLE_TO_GET_ISSUER_CERT_LOCALLY',
  code: 'UNABLE_TO_GET_ISSUER_CERT_LOCALLY'
}