Hiding Storyblok API-Key

Question

I'm using Next.js with Storyblok and recently made use of the react-next-boilerplate .

I noticed that they put the preview token in the _app.js , so essentially publish it:

storyblokInit({
  accessToken: "your-preview-token",
  use: [apiPlugin],
  components,
});

If I use an environment variable instead, which isn't available on the client, I get the error

You need to provide an access token to interact with Storyblok API

in the client. That's because (I think) my components use StoryblokComponent , which makes use of the global Storyblok state. So I wonder:

Should I ignore this error, as I don't plan to interact with the Storyblok API other than using it for component rendering (all the data comes from the server, as far as I understand the concept of static site generation), and component rendering seems to be still working?
Should I just publish the preview token?
Should I create two tokens, one for the server and one for the client?
Setting the token to process.env.STORYBLOK_API_KEY || "NULL" process.env.STORYBLOK_API_KEY || "NULL" (where "NULL" can be anything except the empty string) also works (no more errors) but seems like a weird solution.

I don't really understand why they combine these two things, component rendering and data fetching, in the same function.

Answer 1

I would use a .env.local file and populate it with:

STORYBLOK_API_KEY=your-preview-token

To use the environment variable inside _app.js you have to pass it to next.config.js like this:

    module.exports = {
      env: {
        STORYBLOK_API_KEY: process.env.STORYBLOK_API_KEY,
      }
    }