feat: add universal chakra link component

packages/create-bison-app/template/components/Footer.tsx

@@ -1,6 +1,7 @@
-import { Center, Flex, Text, Link } from '@chakra-ui/layout';
+import { Center, Flex, Text } from '@chakra-ui/layout';
 
 import { Logo } from './Logo';
+import { Link } from './Link';
 
 export function Footer() {
   const year = new Date().getFullYear();

packages/create-bison-app/template/components/Link.tsx

@@ -0,0 +1,44 @@
+import type { PropsWithChildren } from 'react';
+
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+
+type LinkProps =
+  | PropsWithChildren<NextLinkProps & Omit<ChakraLinkProps, 'as'>>
+  | PropsWithChildren<Omit<NextLinkProps, 'as'> & ChakraLinkProps>;
+
+type NextLinkAs = NextLinkProps['as'];
+type ChakraLinkAs = ChakraLinkProps['as'];
+
+//  Has to be a new component because both chakra and next share the `as` keyword
+export const Link = ({
+  href,
+  as,
+  replace,
+  scroll,
+  shallow,
+  prefetch,
+  locale,
+  isExternal,
+  children,
+  ...chakraProps
+}: LinkProps) => {
+  return isExternal ? (
+    <ChakraLink href={href} as={as as ChakraLinkAs} isExternal {...chakraProps}>
+      {children}
+    </ChakraLink>
+  ) : (
+    <NextLink
+      passHref={true}
+      href={href}
+      as={as as NextLinkAs}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      prefetch={prefetch}
+      locale={locale}
+    >
+      <ChakraLink {...chakraProps}>{children}</ChakraLink>
+    </NextLink>
+  );
+};

packages/create-bison-app/template/components/LoginForm.tsx

@@ -1,23 +1,13 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
-import NextLink from 'next/link';
-import {
-  Link,
-  Flex,
-  Text,
-  FormControl,
-  FormLabel,
-  Input,
-  Stack,
-  Button,
-  Circle,
-} from '@chakra-ui/react';
+import { Flex, Text, FormControl, FormLabel, Input, Stack, Button, Circle } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { gql } from '@apollo/client';
 
 import { EMAIL_REGEX } from '../constants';
 import { useAuth } from '../context/auth';
 import { ErrorText } from '../components/ErrorText';
+import { Link } from './Link';
 import { setErrorsFromGraphQLErrors } from '../utils/setErrors';
 import { LoginMutationVariables, useLoginMutation } from '../types';
 
@@ -116,11 +106,9 @@ export function LoginForm() {
       <Flex marginTop={8} justifyContent="center">
         <Text color="gray.500">
           New User?{' '}
-          <NextLink href="/signup" passHref>
-            <Link href="#" color="gray.900">
-              Sign Up
-            </Link>
-          </NextLink>
+          <Link href="/signup" color="gray.900">
+            Sign Up
+          </Link>
         </Text>
       </Flex>
     </form>

packages/create-bison-app/template/components/Logo.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Heading } from '@chakra-ui/react';
-import NextLink from 'next/link';
+
+import { Link } from './Link';
 
 export function Logo() {
   return (
-    <NextLink href="/" passHref>
-      <Heading as="a" size="md">
-        MyApp
-      </Heading>
-    </NextLink>
+    <Heading as={Link} href="/" size="md">
+      MyApp
+    </Heading>
   );
 }

packages/create-bison-app/template/components/Nav.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Link,
   Stack,
   useBreakpoint,
   Button,
@@ -9,7 +8,8 @@ import {
   MenuList,
   MenuItem,
 } from '@chakra-ui/react';
-import NextLink from 'next/link';
+
+import { Link } from './Link';
 
 export function Nav() {
   const breakpoint = useBreakpoint();
@@ -23,9 +23,7 @@ export function Nav() {
 
       <MenuList width="full">
         <MenuItem>
-          <NextLink href="/">
-            <Link href="">Link 1</Link>
-          </NextLink>
+          <Link href="/">Link 1</Link>
         </MenuItem>
 
         <MenuItem>
@@ -45,9 +43,7 @@ export function Nav() {
     </Menu>
   ) : (
     <Stack as="nav" direction="row" ml="auto" alignItems="center" fontSize="md" spacing={8}>
-      <NextLink href="/">
-        <Link href="">Link 1</Link>
-      </NextLink>
+      <Link href="/">Link 1</Link>
 
       <Link href="/#features">Link 2</Link>
       <Link href="/#tech">Link 3</Link>

packages/create-bison-app/template/components/SignupForm.tsx

@@ -1,16 +1,5 @@
 import React, { useState } from 'react';
-import NextLink from 'next/link';
-import {
-  Link,
-  Flex,
-  Text,
-  FormControl,
-  FormLabel,
-  Input,
-  Stack,
-  Button,
-  Circle,
-} from '@chakra-ui/react';
+import { Flex, Text, FormControl, FormLabel, Input, Stack, Button, Circle } from '@chakra-ui/react';
 import { gql } from '@apollo/client';
 import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
@@ -20,6 +9,7 @@ import { setErrorsFromGraphQLErrors } from '../utils/setErrors';
 import { SignupMutationVariables, useSignupMutation } from '../types';
 import { EMAIL_REGEX } from '../constants';
 
+import { Link } from './Link';
 import { ErrorText } from './ErrorText';
 
 export const SIGNUP_MUTATION = gql`
@@ -140,11 +130,9 @@ export function SignupForm() {
       <Flex marginTop={8} justifyContent="center">
         <Text color="gray.500">
           Have an account?{' '}
-          <NextLink href="/login" passHref>
-            <Link href="#" color="gray.900">
-              Sign In
-            </Link>
-          </NextLink>
+          <Link href="/login" color="gray.900">
+            Sign In
+          </Link>
         </Text>
       </Flex>
     </form>

packages/create-bison-app/template/layouts/LoggedOut.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Flex, Button } from '@chakra-ui/react';
-import NextLink from 'next/link';
 
+import { Link } from '../components/Link';
 import { Logo } from '../components/Logo';
 import { Footer } from '../components/Footer';
 
@@ -16,11 +16,9 @@ export function LoggedOutLayout({ children }: Props) {
         <Flex p={4}>
           <Logo />
 
-          <NextLink href="/login" passHref>
-            <Button as="a" ml="auto" display={{ base: 'none', lg: 'inline-flex' }}>
-              Login
-            </Button>
-          </NextLink>
+          <Button as={Link} href="/login" ml="auto" display={{ base: 'none', lg: 'inline-flex' }}>
+            Login
+          </Button>
         </Flex>
       </>