Add BASE_PATH env variable

Importing logo file directly. Adding environment variable to `Image` src doesn't seem to work.
Linking to background image using path.  Mantine `BackgroundImage` doesn't support directly importing file.

.env.example

@@ -9,6 +9,10 @@
 # When adding additional environment variables, the schema in "/src/env.mjs"
 # should be updated accordingly.
 
+# next.js base path
+# https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+BASE_PATH="/"
+
 # Prisma
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
 # DATABASE_URL="mysql://root@localhost:9999/modslist?schema=public"
@@ -23,7 +27,8 @@ SEED_RANDOM_DATA="false"
 # https://next-auth.js.org/configuration/options#secret
 # For local development, you can just keyboard-smash a longish string as your secret
 NEXTAUTH_SECRET=""
-NEXTAUTH_URL="http://localhost:3000"
+# URL for NextAuth's Auth endpoint. Must be full path.
+NEXTAUTH_URL="http://localhost:3000/auth"
 
 # Next Auth Discord Provider
 DISCORD_CLIENT_ID=""

next.config.mjs

@@ -6,6 +6,7 @@
 
 /** @type {import("next").NextConfig} */
 const config = {
+  basePath: process.env.BASE_PATH,
   reactStrictMode: true,
   images: {    //TODO!: figure out how to fix crash on next.config.mjs change
     remotePatterns: [

src/components/layout/header.tsx

@@ -1,5 +1,6 @@
 import { Flex, createStyles, Title, Box } from "@mantine/core";
 import Image from "next/image";
+import cmlLogo from "~/../public/images/logo/cml_logo.png";
 
 
 
@@ -33,13 +34,13 @@ export const Header = () => {
             <Flex className={classes.header}>
                 <Image
                     priority
-                    src="/images/logo/cml_logo.png"
+                    src={cmlLogo}
                     height={height}
                     width={width}
                     alt="CML Logo"
                 />
                 <Title className={classes.siteTitle} order={1}>Celeste Mods List</Title>
-                <Box w={width}/>
+                <Box w={width} />
             </Flex>
         </header>
     );

src/components/layout/layout.tsx

@@ -75,7 +75,7 @@ export const Layout = ({
                 />
             </Head>
             <BackgroundImage
-                src="/images/cml_background1.png"
+                src={`${process.env.BASE_PATH}/images/cml_background1.png`}
                 className={classes.backgroundImage}
             >
                 <Grid gutter="0">

src/pages/_app.tsx

@@ -17,7 +17,7 @@ const MyApp: AppType<{ session: Session | null; }> = ({
   pageProps: { session, ...pageProps },
 }) => {
   return (
-    <SessionProvider session={session}>
+    <SessionProvider session={session} basePath={process.env.BASE_PATH}>
       <MantineProvider
         emotionCache={emotionCache}
         withGlobalStyles