Link and form behavior different on prod and dev

[christiancho]

When I run yarn dev to develop locally, I don't run into any of the following issues:

• GET http://localhost:3000/_next/static/XAl8xVzBNU-g2S6Am8mzk/pages/_app.js net::ERR_ABORTED 404 (Not Found) error in console
• Link component (next/link) will trigger a page refresh - tested by placing css on body and clicking on a link
• Submitting a form even with preventDefault called will refresh the page but add ? to the URL

I'm currently using rebass and wondering if I didn't set up SSR properly with it. My _app.jsx file:

import { useRouter } from 'next/router';
import NextLink from 'next/link';
import { ThemeProvider } from 'emotion-theming';
import { Flex, Box, Text, Image } from 'rebass';

import BaseStyle from '~/components/BaseStyle';
import GlobalHead from '~/components/GlobalHead';

import theme from '~/theme';

export const config = { amp: true };

const NAV_ITEMS = [
  { label: 'About Labs', route: '/about' },
  { label: 'Our Experiments', route: '/experiments' },
];

function App({ Component, pageProps }) {
  const { pathname } = useRouter();
  return (
    <ThemeProvider theme={theme}>
      <GlobalHead />
      <BaseStyle />
      <Flex
        as="header"
        alignItems="center"
        justifyContent="space-between"
        width="100%"
      >
        <NextLink href="/">
          <Flex variant="logo" m={4}>
            <Image
              src="/apple-icon-72x72.png"
              height="1em"
              display="inline-block"
            />
            &nbsp;Primer&nbsp;
            <Text fontWeight="light" as="span">
              Labs
            </Text>
          </Flex>
        </NextLink>

        <Box
          as="nav"
          sx={{ borderBottom: '1px solid black', display: ['none', 'unset'] }}
        >
          <Flex as="ul">
            {NAV_ITEMS.map(navItem => {
              const variant = pathname.includes(navItem.route)
                ? 'active'
                : 'inactive';
              return (
                <Box as="li" key={navItem.route}>
                  <NextLink href={navItem.route}>
                    <a><Text variant={`navlink.${variant}`}>{navItem.label}</Text></a>
                  </NextLink>
                </Box>
              );
            })}
          </Flex>
        </Box>
      </Flex>
      <Box as="main" sx={{ mt: 6, mx: 'auto', maxWidth: '80em' }} Container>
        <Component {...pageProps} />
      </Box>
    </ThemeProvider>
  );
}

export default App;