title: How can I call gRPC endpoint from Next.js Application inside of a functional component?
body: <p>I have set up default gRPC server via Visual Studio .net 6.0.</p>
  <p>The proto file is as foolowing:</p>
  <pre><code>syntax = &quot;proto3&quot;;
  
  option csharp_namespace = &quot;GrpcService&quot;;
  
  package greet;
  
  // The greeting service definition.
  service Greeter {
    // Sends a greeting
    rpc SayHello (HelloRequest) returns (HelloReply);
  }
  
  // The request message containing the user's name.
  message HelloRequest {
    string name = 1;
  }
  
  // The response message containing the greetings.
  message HelloReply {
    string message = 1;
  }
  </code></pre>
  <p>And the Greeter service as following:</p>
  <pre><code>using Grpc.Core;
  
  namespace GrpcService.Services
  {
      public class GreeterService : Greeter.GreeterBase
      {
          private readonly ILogger&lt;GreeterService&gt; _logger;
          public GreeterService(ILogger&lt;GreeterService&gt; logger)
          {
              _logger = logger;
          }
  
          public override Task&lt;HelloReply&gt; SayHello(HelloRequest request, ServerCallContext context)
          {
              return Task.FromResult(new HelloReply
              {
                  Message = &quot;Hello &quot; + request.Name
              });
          }
      }
  }
  </code></pre>
  <p>So the default one, nothing fancy. I know how to call this service via C#. And I get back the result as per the function above.</p>
  <p>I though don't understand what packages and how should I call it from a web app client via javascript, in a next.js component.</p>
  <p>I want to achieve that on a click [for example] I will be calling this.</p>
  <pre><code>import type { NextPage } from &quot;next&quot;;
  import styles from &quot;../styles/Home.module.css&quot;;
  
  const Home: NextPage = () =&gt; {
    const grpcCall = () =&gt; {
      try {
        const grpc = require(&quot;grpc&quot;);
        const protoLoader = require(&quot;@grpc/proto-loader&quot;);
        const packageDef = protoLoader.loadSync(&quot;greet.proto&quot;, {});
        const grpcObject = grpc.loadPackageDefinition(packageDef);
        const greetPackage = grpcObject.greet;
        const client = new greetPackage.Greeter(
          &quot;https://localhost:49153/&quot;,
          grpc.credentials.createInsecure()
        );
        client.SayHello({ name: &quot;Say Hello&quot; });
      } catch (error) {
        console.log(error);
      }
    };
  
    return (
      &lt;div className={styles.container}&gt;
        &lt;div onClick={grpcCall} className={styles.title}&gt;
          Press to call gRPC HERE
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>The above code though complains about fs not being resolved, though I don't really think it is the issue.</p>
  <p>Error:</p>
  <pre><code>Module not found: Can't resolve 'fs'
  
  Import trace for requested module:
  ./node_modules/@grpc/proto-loader/build/src/index.js
  ./pages/index.tsx
  
  https://nextjs.org/docs/messages/module-not-found
  Could not find files for / in .next/build-manifest.json
  Could not find files for / in .next/build-manifest.json
  </code></pre>
  <p>And the whole project is a default next.js app with typescript setting.</p>
  <p>So the question is How do I do the call from a javascript client to C# server via gRPC? What code should I add here?</p>
  <p>I would apprieciete a simple solution here and if possible detailed explanation.</p>
  <p>Regards,</p>