factor out NextLink

docs/src/Header.js

@@ -1,28 +1,24 @@
 import React from 'react'
 import {withRouter} from 'next/router'
 import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
-import NextLink from 'next/link'
 import BoxShadow from './BoxShadow'
-import {Text, Flex, Link, Sticky, Box} from '@primer/components'
+import Link from './Link'
+import {Text, Flex, Sticky, Box} from '@primer/components'
 
 const NavLink = withRouter(({href, router, ...rest}) => (
-  <NextLink href={href}>
   <Link color="white" href={href} px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
-  </NextLink>
 ))
 
 const Header = props => (
   <Sticky zIndex={100}>
     <BoxShadow py={3} bg="gray.9" color="white" {...props}>
       <Flex className="p-responsive" alignItems="center" justifyContent="space-between">
-        <NextLink href="/css">
         <Link ml={3} color="white" href="/css">
           <Flex alignItems="center" justifyContent="center">
             <Octicon icon={MarkGithub} size="medium" />
             <Text ml={3}>Primer CSS</Text>
           </Flex>
         </Link>
-        </NextLink>
         <Box display={['none', 'none', 'block']}>
           <NavLink href="/css">Docs</NavLink>
           <NavLink href="/css/getting-started">Getting Started</NavLink>

docs/src/Link.js

@@ -0,0 +1,8 @@
+import NextLink from 'next/link'
+import {Link as PrimerLink} from '@primer/components'
+
+export default ({href, ...rest}) => (
+  <NextLink href={href}>
+    <PrimerLink href={href} {...rest} />
+  </NextLink>
+)

docs/src/SideNav.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import NextLink from 'next/link'
 import {withRouter} from 'next/router'
 import {join} from 'path'
-import {Box, BorderBox, Link, Flex, Relative} from '@primer/components'
-import {rootPage, requirePage} from './utils'
+import {Box, BorderBox, Flex, Relative} from '@primer/components'
+import Link from './Link'
+import {rootPage} from './utils'
 
 export default props => (
   <Relative is="nav">
@@ -47,7 +47,6 @@ const NavList = ({path, router}) => (
 
 const SectionLink = withRouter(({href, router, ...rest}) => (
   <Box mb={2}>
-    <NextLink href={href}>
     <NodeLink
       href={href}
       color="gray.9"
@@ -55,21 +54,18 @@ const SectionLink = withRouter(({href, router, ...rest}) => (
       fontWeight={router.pathname.startsWith(href) ? 'bold' : null}
       {...rest}
     />
-    </NextLink>
   </Box>
 ))
 
 const NavLink = withRouter(({href, router, ...rest}) => {
   return (
     <Box mb={2}>
-      <NextLink href={href}>
       <NodeLink
         href={href}
         color={router.pathname === href ? 'black' : undefined}
         fontSize={1}
         {...rest}
       />
-      </NextLink>
     </Box>
   )
 })
@@ -80,6 +76,6 @@ function NodeLink(props) {
     return <Link {...props} />
   }
   const node = rootPage.first(node => node.path === href)
-  const children = (node ? requirePage(node.file).meta.title : null) || href
+  const children = (node ? node.meta.title : null) || href
   return <Link {...props}>{children}</Link>
 }

docs/src/components.js

@@ -1,4 +1,5 @@
-export {default as Header} from './Header'
-export {default as SideNav} from './SideNav'
-export {default as IndexHero} from './IndexHero'
 export {default as BoxShadow} from './BoxShadow'
+export {default as Header} from './Header'
+export {default as IndexHero} from './IndexHero'
+export {default as Link} from './Link'
+export {default as SideNav} from './SideNav'