Fixed all build errors

components/activelink.tsx

@@ -3,7 +3,6 @@ import { ReactNode } from "react"
 import Link from "next/link"
 import styled, {css} from "styled-components"
 
-
 const ALink = styled.a<{active?: boolean}>`
 	border-bottom: 1px solid transparent;
 	${({active}) => active && css`
@@ -12,7 +11,7 @@ const ALink = styled.a<{active?: boolean}>`
 	`}
 `
 
-export default ({children, href}: {children: ReactNode, href: string}) => {
+const ActiveLink = ({children, href}: {children: ReactNode, href: string}) => {
 	const router = useRouter()
 	return (
 		<Link href={href} passHref>
@@ -20,3 +19,5 @@ export default ({children, href}: {children: ReactNode, href: string}) => {
 		</Link>
 	)
 }
+
+export default ActiveLink

components/footer.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import Link from "next/link"
 
-const Footer = styled.footer`
+const FooterCont = styled.footer`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -24,11 +24,11 @@ const Spacer = styled.div`
 	flex: 1;
 `
 
-export default () => {
+const Footer = () => {
 	return (
 		<>
 			<Spacer />
-			<Footer>
+			<FooterCont>
 				<p>Copyright &copy; {new Date().getFullYear()} Elias Almqvist</p>
 				<UList>
 					<li><a href="#">{"<Back to top>"}</a></li>
@@ -36,10 +36,12 @@ export default () => {
 				</UList>
 				<p>Source Code</p>
 				<UList>
-					<li><a href="https://github.com/E-Almqvist/wychdev-nextjs" target="_blank">GitHub</a></li>
-					<li><a href="https://git.wych.dev/wychdev-nextjs.git" target="_blank">WychGit</a></li>
+					<li><a href="https://github.com/E-Almqvist/wychdev-nextjs" target="_blank" rel="noreferrer">GitHub</a></li>
+					<li><a href="https://git.wych.dev/wychdev-nextjs.git" target="_blank" rel="noreferrer">WychGit</a></li>
 				</UList>
-			</Footer>
+			</FooterCont>
 		</>
 	)
 }
+
+export default Footer

components/header.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import Nav from './nav'
 import Link from "next/link"
 
-const Header = styled.header`
+const HeaderCont = styled.header`
 	display: flex;
 	align-items: center;
 	border-bottom: var(--border-size) var(--border-type) var(--border-color);
@@ -23,11 +23,13 @@ const Header = styled.header`
 	}
 `
 
-export default () => {
+const Header = () => {
 	return (
-		<Header>
+		<HeaderCont>
 			<h1><Link href="/">wych.dev</Link></h1>
 			<Nav />
-		</Header>
+		</HeaderCont>
 	)
 }
+
+export default Header

components/layout.tsx

@@ -2,10 +2,12 @@ import Header from './header'
 import Footer from './footer'
 import {ReactNode} from 'react'
 
-export default ({children}: {children: ReactNode}) => {
+const Layout = ({children}: {children: ReactNode}) => {
 	return <>
 		<Header />
 			<main>{children}</main>
 		<Footer />
 	</>
 }
+
+export default Layout

components/nav.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import ActiveLink from './activelink'
 
-const Nav = styled.nav`
+const NavCont = styled.nav`
 	display: flex;
 	gap: 1.5rem;
 	font-size: 1.2rem;
@@ -17,14 +17,16 @@ const Nav = styled.nav`
 	}
 `
 
-export default () => {
+const Nav = () => {
 	return (
-		<Nav>
+		<NavCont>
 			<ActiveLink href="/">About</ActiveLink>
 			<ActiveLink href="/#contact">Contact</ActiveLink>
 			<ActiveLink href="/projects">Projects</ActiveLink>
-			<a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>
+			<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>
 			<a href="https://git.wych.dev">WychGit</a>
-		</Nav>
+		</NavCont>
 	)
 }
+
+export default Nav

pages/_app.tsx

@@ -11,7 +11,7 @@ type AppPropsWithLayout = AppProps & {
 	Component: NextPageWithLayout
 }
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 	const getLayout = Component.getLayout ?? ((page) => page)
 	return getLayout(<Component {...pageProps}/>)
 }

pages/index.tsx

@@ -62,7 +62,7 @@ const Page: NextPageWithLayout = () => {
 
 			<Section> 
 				<h2>Projects</h2> 
-				<p>Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://git.wych.dev" target="_blank">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p> 
+				<p>Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://git.wych.dev" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>. You can also check out <Link href="/projects">/projects</Link> to view all of my projects (including hardware projects and so on).</p> 
 			</Section> 
 
 			<Section>
@@ -104,7 +104,7 @@ const Page: NextPageWithLayout = () => {
 
 			<Section>
 				<h2 id="contact">Contact</h2>
-				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution against bots et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively you could query for my email with my PGP fingerprint (key-id) on some PGP key server (i.e. the <a href="https://pgp.mit.edu/" target="_blank">MIT</a> or <a href="https://keyserver.ubuntu.com/" target="_blank">Ubuntu</a> key-server).</p>
+				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution against bots et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively you could query for my email with my PGP fingerprint (key-id) on some PGP key server (i.e. the <a href="https://pgp.mit.edu/" target="_blank" rel="noreferrer">MIT</a> or <a href="https://keyserver.ubuntu.com/" target="_blank" rel="noreferrer">Ubuntu</a> key-server).</p>
 				<CList>
 					<li>
 						PGP Fingerprint: <Code>68B2976849F03C7238AEB081E31A99CE3E75A158</Code>
@@ -113,7 +113,7 @@ const Page: NextPageWithLayout = () => {
 						Email: <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code>
 					</li>
 					<li>
-						GitHub: <a href="https://github.com/E-Almqvist" target="_blank">github.com/E-Almqvist</a>
+						GitHub: <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">github.com/E-Almqvist</a>
 					</li>
 				</CList>
 			</Section>