正解は「環境変数名をNEXT_PUBLIC_API_URLに変更する」です。Next.jsではセキュリティのため、デフォルトでサーバーサイドの環境変数はクライアントに公開されません。クライアント側（ブラウザ）で参照する環境変数には必ずNEXT_PUBLIC_プレフィックスを付ける必要があります。例えばNEXT_PUBLIC_API_URLと命名すれば、process.env.NEXT_PUBLIC_API_URLでクライアントからアクセス可能になります。ただし、APIキーなどの秘密情報にNEXT_PUBLIC_を付けるとブラウザに露出するため、公開して問題ない値のみに使用してください。環境変数の変更後はdev serverの再起動が必要です。