Next.js access environment variable in _app.js file - next.js

Question

I am building a blog using Storyblok (v2) and Next.js (v13). I understand that NEXT_PUBLIC environment variables can be exposed to the browser, and I do not want my access token exposed. I have used the api folder in the past to accomplish this in component files, but I do not think that I can use that for the page files—unless I am wrong. I have read the documentation from Next.js, and I am confused as to how I can accomplish this in my _app.js file. I am still learning about how to properly hide these using Next.js, and I was successful in my previous attempt.
This is what I have tried so far after searching for answers. I have added my access token to a .env file in the root of my project. I did not use NEXT_PUBLIC. I left that off because in my other project where I was able to hide my environment variables from the browser, that is how I did it. I also added it to my next.config.js file based on the information that I found in my search. This is what that file looks like:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: { ACCESS_TOKEN: process.env.ACCESS_TOKEN },
}
module.exports = nextConfig
My _app.js file looks like this:
import { storyblokInit, apiPlugin } from '#storyblok/react'
import '../styles/globals.css'
storyblokInit({
accessToken: process.env.ACCESS_TOKEN,
use: [apiPlugin],
});
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Of course the above does not work. When I add {process.env.ACCESS_TOKEN} to any page, it is showing the token. I understand why this does not work based on the docs that I read, but I just wanted to try everything that I could before posting my question here.
Prior to doing these things, I also tried adding my variable to the .env file in the root of my project (not using the NEXT_PUBLIC prefix), and then in my _app.js file, I had the following:
import { storyblokInit, apiPlugin } from '#storyblok/react'
import '../styles/globals.css'
storyblokInit({
accessToken: token,
use: [apiPlugin],
});
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
function getStaticProps() {
return {
props: {
token: props.env.ACCESS_TOKEN
}
}
}
My next.config.js file wasn't touched, so it did not contain env in it. The error that I get is that token is not defined. This article is where I found the steps that I attempted.
I started using trial and error after that—mainly because I went down the Google rabbit hole and got super frustrated. This was my Hail Mary:
import { storyblokInit, apiPlugin } from '#storyblok/react'
import '../styles/globals.css'
function MyApp({ Component, pageProps, props }) {
storyblokInit({
accessToken: props.token,
use: [apiPlugin],
});
return <Component {...pageProps} />
}
export default MyApp
function getStaticProps() {
return {
props: {
token: props.env.ACCESS_TOKEN
}
}
}
The error that I get here is: Cannot read properties of undefined (reading 'token')
Is what I am trying to do even possible in the _app.js file? I am happy to read any other documentation that I may not have found in my search if that is a better response to my question.