How to handle urls with nextjs and chakra-ui?

Solution is;

Create Linkify.js

Linkify.js file:

import { Link } from '@chakra-ui/react';
import ReactLinkify from 'react-linkify';

const componentDecorator = (href, text, key) => (
  <Link
    href={href}
    key={key}
    isExternal={true}
    color="blue.500"
    _focus={{ outline: 'none' }}
  >
    {text}
  </Link>
);

export const Linkify = (props) => {
  return <ReactLinkify {...props} componentDecorator={componentDecorator} />; };

Import new Linkify Component to the file.

Usage

import { Linkify } from './Linkify';
import { Text } from '@chakra-ui/react';

export default function Usage(){
 return(
 <Linkify>
  <Text>https://stackoverflow.com</Text>
 </Linkify>
 )
}

Problem Solved! Thanks...