Next.js 中的令牌可见性

Question

Is a fetch request token in a next.js app visible to a client side user?

I must to prepare an application using GitHub GraphQL API. I though about using fetch request with a bearer token for it, but I have a doubts about security and good practices in my app.

     fetch((`https://api.github.com/graphql`, {
            method: 'POST',
            headers: {
                "Content-Type": 'application/json',
                'Authorization': 'Bearer ' + TOKEN,
            },
            body: JSON.stringify({
                query: `
                {
                    search(query: "is:public", type: REPOSITORY, first: 10) {
                      repositoryCount
                      pageInfo {
                        endCursor
                        startCursor
                      }
                      edges {
                        node {
                          ... on Repository {
                            name
                          }
                        }
                      }
                    }
                  }
            `
            })
        }))

Answer 1

According to the Next.js docs , you need to create a .env.local file at the root of the project directory and add the secrets.

When adding secrets, you need to prefix the secret with NEXT_PUBLIC_ to expose it to the browser. For example:

    NEXT_PUBLIC_GITHUB_TOKEN=amogussus

According to the docs:

The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix.

Then you might add it into your code with process.env.NEXT_PUBLIC_GITHUB_TOKEN