In order to render the link field in Next.js, return the jsonValue from GraphQL as below.

query ContentCardQuery($datasource: String!) {
  datasource: item(path: $datasource, language: "en") {
    id
    name
    ... on About {
      title {
        value
      }
      link {
        jsonValue
      }
    }
  }
}

Thereafter you can refer Link component from Next.js in frontend as below.

import {
  Link
} from '@sitecore-jss/sitecore-jss-nextjs';

// Refer the link field jsonValue from GraphQL
<Link
  field={props.link.jsonValue}
/>

Using above way, you can successfully edit and render links in experience editor as well as it displays on website as well.

Hope this helps!!!

In order to render the server url on link field in GraphQL, return the jsonValue from GraphQL as below.

query ContentCardQuery($datasource: String!) {
  datasource: item(path: $datasource, language: "en") {
    id
    name
    ... on About {
      title {
        value
      }
      link {
        jsonValue
      }
    }
  }
}

This will contains the server link as well as enlisted below.

Note: Make sure you set the alwaysIncludeServerUrl setting as true for the link provider specified on the website.

Hope this helps!!! Let me know in case you have any doubts.