Added 404 page

Author: luistak

components/languages.tsx

@@ -28,15 +28,15 @@ const Container = styled.div`
 `;
 
 export function Languages() {
-  const { locales, push } = useRouter();
+  const { locales, push, pathname } = useRouter();
 
   const handleLocaleClick = (locale: Locale) => () => {
     gtag.event({
       action: 'i18n_click',
       category: 'Locale',
       label: locale,
     });
-    push('/', '/', { locale });
+    push(pathname, pathname, { locale });
   };
 
   return (

components/template.tsx

@@ -5,6 +5,7 @@ import { GlobalStyles } from 'styles/globals';
 import styled, { ThemeProvider } from 'styled-components';
 import { tokens } from 'styles/theme';
 import { FlexColumnCentered } from 'styles/extends';
+import { Languages } from './languages';
 
 const Page = styled.section`
   padding: 2rem;
@@ -37,6 +38,7 @@ export function PageTemplate({ t, title, children }: PageTemplateProps) {
           <title>{title}</title>
           <link rel="icon" href="/favicon.ico" />
         </Head>
+        <Languages />
         <Main>{children}</Main>
         <Footer>
           <a href="/"> {t('author')} ©.</a> {t('footer')}

i18n/index.ts

@@ -8,6 +8,8 @@ const portuguese = {
   bio:
     'Um entusiasta apaixonado por Typecript e engenheiro de software frontend do Brasil',
   footer: 'Todos os direitos reservados',
+  backtohome: 'Ir a página inicial 🏡',
+  404: 'Ops esta página não foi encontrada.',
 };
 
 const english = {
@@ -16,6 +18,8 @@ const english = {
   bio:
     'A passionate Typescript enthusiast and frontend software engineer from Brazil',
   footer: 'All rights reserved',
+  backtohome: 'Go to home page 🏡',
+  404: 'Ops this page could not be found.',
 };
 
 const locales = {

pages/404.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import Link from 'next/link';
+import { Translate } from 'i18n';
+import { PageTemplate } from 'components/template';
+
+type NotFoundProps = {
+  t: Translate;
+};
+const NotFound: NextPage<NotFoundProps> = ({ t }) => (
+  <PageTemplate t={t} title={t(404)}>
+    <h1>🤔 404</h1>
+    <p>{t(404)}</p>
+    <Link href="/">{t('backtohome')}</Link>
+  </PageTemplate>
+);
+
+export default NotFound;

pages/index.tsx

@@ -5,7 +5,6 @@ import { PageTemplate } from 'components/template';
 import styled from 'styled-components';
 
 import * as gtag from 'lib/gtag';
-import { Languages } from 'components/languages';
 
 const Image = styled(NextImage)`
   border-radius: 50%;
@@ -68,7 +67,6 @@ const Home: NextPage<HomeProps> = ({ t }) => (
   <PageTemplate t={t} title={t('author')}>
     <h1>{t('welcome')}</h1>
     <p>{t('bio')}</p>
-    <Languages />
     <Image
       src="/takah.jpg"
       alt="Picture of the author"