
I have planned to implement the <span class="highlight-small">Firebase</span> authentication method on my NextJS application, so I created the project on the Firebase site and received the Firebase configuration values.

Firebase config values are nothing but an object. It has appid, apiKey, projectId, and so on. <br/>For better key management, I thought to add these keys to the environment variable, aka env. After that, I used them in my project.

```javascript
const firebaseConfig = {
  apiKey: "XXXX.XXXX.XXXX.XXXX.XXXX",
  authDomain: "XXXX.XXXX.XXXX.XXXX.XXXX",
  projectId: "XXXX.XXXX.XXXX.XXXX.XXXX",
  storageBucket: "XXXX.XXXX.XXXX.XXXX.XXXX",
  messagingSenderId: "XXXX.XXXX.XXXX.XXXX.XXXX",
  appId: "XXXX.XXXX.XXXX.XXXX.XXXX",
};
```

In my .env file

```javascript
API_KEY=XXXX.XXXX.XXXX.XXXX.XXXX
AUTH_DOMAIN=XXXX-XXX.firebaseapp.com
PROJECT_ID=XXXX.XXXX.XXXX.XXXX.XXXX
STORAGE_BUCKET=XXXX.XXXX.XXXX.XXXX.XXXX
MESSAGING_SENDER_ID=12345678
APP_ID=1:12345678:web:XXXX.XXXX.XXXX
```

But when running the application, it throws an error. It says <span class="highlight-small">"auth/invalid-api-key"</span>. I have verified the config values on my console and am able to see them, but getting the error is also a bit confusing.

<div class="highlight-error">
Unhandled Runtime Error<br/>
FirebaseError: Firebase: Error (auth/invalid-api-key).
</div>

### How to use the environment variable in NextJS

We can fix this problem in two ways, you can choose the logic accordingly.

First solution

Environment variables are only available in the Node.js(server side ) environment, meaning they won't be exposed to the browser. In order to expose a variable to the browser(client side) you have to prefix the variable with <span class="highlight-small">`NEXT_PUBLIC_`</span>

So you have to modify your environment values by adding the prefix <span class="highlight-small">`NEXT_PUBLIC_`</span> , that will be like this.

```javascript
NEXT_PUBLIC_API_KEY=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_AUTH_DOMAIN=XXXX-XXX.firebaseapp.com
NEXT_PUBLIC_PROJECT_ID=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_STORAGE_BUCKET=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_MESSAGING_SENDER_ID=12345678
NEXT_PUBLIC_APP_ID=1:12345678:web:XXXX.XXXX.XXXX
```

Second solution

Open/Create the next.config.js file and export the variable there under the env object. On this solution we do not required any modification on the variable name.

```javascript
module.exports = {
  //add other configs here too
  env: {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
  },
};
```


Why am I getting an auth/invalid-api-key error when setting the Firebase values in the environment variable on NextJS ?

[Solved] Firebase auth/invalid-api-key error when setting the values in the environment variable on NextJS?


The importance of the http response headers is highly needed to protect the websites from hackers. If you poorly managed the response header, then one day the website will be compromised to the hacker.

Response headers are common to all the web applications that are created on any technology. I have already had <a href="/posts/What-are-the-different-types-of-HTTP-Security-headers">blog post</a> is related to the HTTP response headers.

<div class="highlight">
<h2>What is HTTP security headers? </h2>
<p>The HTTP security headers are specifically about the security of the web application while doing the communication between the client and server. </p>
<p>An HTTP header is a response by a web server to a browser that is trying to access a web page. </p>
</div>

As I said, setting the response headers in websites will be different in different technology.

I just wanted to let you know how to set the response headers in NextJS. For that you have to follow some simple steps.

For your information, we are going to make changes to the next.config.js file. If you do not have the file, please create a file with <span class="highlight-small">`next.config.js`</span> name in the root of the application.

<details class="fullWidth">
<summary>next.config.js</summary>
<p>next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build. </p>
</details>

In the below code snippet, I have stored all the necessary security headers as array in a variable.

```javascript
const securityHeaders = [
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=(), browsing-topics=()",
  },
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "X-Frame-Options",
    value: "SAMEORIGIN",
  },
  {
    key: "X-XSS-Protection",
    value: "1; mode=block",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "referrer-policy",
    value: "origin-when-cross-origin",
  },
  {
    key: "x-content-type-options",
    value: "nosniff",
  },
];
```

Create an async function "headers" on next.config.js export array. The function name <span class="highlight-small">`headers`</span> is reserved for http response headers feature.

The code is given below for your reference.

```javascript
module.exports = {
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: "/posts/:slug",
        headers: securityHeaders,
      },
      {
        // Apply these headers to all routes in your application.
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};
```

The function return should be an array, containing object should in the following format

```javascript
[
  {
    source:"url",
    headers:<headers>
  }
]
```

Once you exported the function, then the securityHeaders will be attached to the URL response.


The importance of the http response headers are highly needed to protect the websites from hackers. If you poorly managed the response header then one day the website will be compromise to the hacker.

How to set the http response headers in NextJS websites

## Introduction
  For every website the Sitemap will be playing important role for SEO performance. In Ecommerce and other consumer websites also SEO have important role for developing their revenue. To improve the SEO, the sitemap is helping the search engines to read the root of the websites. Says sitemap would be the index for every websites. It contains all the urls of the websites.

  Here we going to discuss how to automate the Sitemap creation when new Url or page being added to the website and this demonstration will be in NextJS.

  Lets see the code for how to generate sitemap in NextJS

## Getting started

Please click the below url to know how the Sitemap would look like

E.g :- [Sitemap of devphobia.com](/sitemap.xml)

We can find the sitemap mostly in the place of root folder itself. www.example.com/sitemap.xml

basically sitemap is an XML file it contains Url, modified date and the priority.

In Next.js there are some 3rd party react packages are available to create the sitemap.xml, But in our example we are not going to use any 3rd party packages. Because it is a less time consuming trick.

## Demonstration

Create a file name with sitemap.js under the pages folder or where you would like.
Place the below code in to the file.
![create file in pages folder nextjs](/assets/blog/helpers/sitemap-file-created.JPG)

```javascript
export default function handler(req, res) {
  const allUrls = getAllUrls(); // this method should return the Urls from DB or anyother places

  res.statusCode = 200;
  res.setHeader("Content-Type", "text/xml");
  const orginalPath = "https://devphobia.com/posts";

  res.setHeader("Cache-control", "stale-while-revalidate, s-maxage=3600");

  // generate sitemap here
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
      ${allUrls
        .map((url) => {
          return `
            <url>
              <loc>${orginalPath}/${url}</loc>
              <lastmod>${new Date().toISOString()}</lastmod>
              <changefreq>monthly</changefreq>
              <priority>1.0</priority>
            </url>
          `;
        })
        .join("")}
      </urlset>`;

  res.end(xml);
}
```


```javascript
const allUrls = getAllUrls(); // this method should return the Urls from DB or anyother places
```
This line should capture the whole Url(s) and the date (creation date of the article or record). In my case <code>getAllUrls()</code> will provie the list of URLs.

We wrote the code in a response handler so we can provide any type when responding to the request.
here the page is responding in the format of XML.

in the next step is assigning the content to the sitemap.xml page.

for that we have to add/create some codes to next.config.js file.

Please find the below snippet,

```javascript

module.exports = {
  async rewrites() {
    return [
      {
        source: "/sitemap.xml",
        destination: "/sitemap",
      },
    ];
  },
};


```

The above code will get the sitemap and we can add this to any search engine's webmaster.

Now you no need to add the urls and details manually to the sitemap xml file. This code will create it for you.

Thank You :)


For every website the Sitemap will be playing important role for SEO performance. In Ecommerce and other consumer websites also SEO have important role for developing their revenue.

More Stories related to 'nextjs'

Also read the similar topics