Ali Burak Özden


## Introduction

Welcome to our article on optimizing your Next.js app's performance through the use of getServerSideProps and getStaticProps. As a big NextJS fan, I want to show how can we get the best results using NextJS's power.

In this article, we will delve into the details of these two methods and show you how to use them effectively to fetch data in the most efficient way possible. Whether you're a seasoned Next.js developer or just getting started, this article will provide you with the knowledge you need to take your app's performance to the next level. So, let's get started and see how we can use these powerful tools to improve the speed and functionality of your Next.js app.

## The importance of optimizing the Next.js app's performance

When it comes to building web applications, performance is key. Nobody wants to use a slow and clunky app, and in today's fast-paced world, people expect websites to load quickly and smoothly. This is especially true when it comes to Next.js, a popular framework for building React apps. With Next.js, you can build powerful and efficient web apps, but it's important to take the time to optimize your app's performance to ensure that it runs at its best.

## What is the meaning of Optimization

Optimizing your Next.js app's performance can mean the difference between a successful app and one that falls short. It can also mean the difference between a good user experience and a frustrating one. And let's not forget about SEO, search engines like Google will also reward the fast and optimized websites with better ranking which will bring more traffic to your website.
If you're working with Next.js, you might have heard of this fancy feature called incremental static regeneration. Basically, it's a way for Next.js to optimize the performance of your web app by only regenerating the parts that have changed, instead of the whole thing every time. Sounds pretty cool, right?

Let's break down getServerSideProps and getStaticProps, and how they can help you optimize your Next.js app's performance.

##  Understanding getServerSideProps

getServerSideProps is a method that lets you fetch data on the server-side during the initial request. This is perfect for situations where the data being fetched is specific to the user, or when the data is dynamic and changes often.

Here's a simple example of how you might use getServerSideProps to fetch a user's profile information:

```js
export async function getServerSideProps(context) {
  // Fetch user's profile information
  const res = await fetch(`https://my-api.com/users/${context.params.userId}`);
  const user = await res.json();

  // Pass user data to the page component
  return { props: { user } }
}
```

##  Understanding getStaticProps

On the other hand, getStaticProps is a method that lets you fetch data at build time, and the data is then stored as a JSON file. This is perfect for situations where the data being fetched is static, and doesn't change often.

Here's an example of how you might use getStaticProps to fetch a list of blog posts:

```js
export async function getStaticProps() {
   const slug = context.params?.slug as string;

    const blogPosts = await client.getEntries({
      'fields.slug[in]': slug,
    });

    const blogPost = blogPosts.items[0].fields as IBlogPostFields;

    return {
      props: {
        blogPost,
      },
    };
}
```

To be able to use getStaticProbs, we need to specify all the paths of pages that we want to create statically. So, with getStaticPaths function we are defining all the paths.

```js
export async function getStaticPaths(){
  const allPosts = await client.getEntries();

  const paths = allPosts.items.map((post) => {
    return {
      params: { slug: post.slug },
    };
  });

  return {
    paths,
    fallback: 'blocking',
  };
}
```
## The differences between getServerSideProps and getStaticProps

So, the main difference between getServerSideProps and getStaticProps is that the former is executed on the server-side during the initial request and the latter is executed during the build time.

It's important to keep in mind that, getStaticProps is only called at build time, whereas getServerSideProps is called on each request, so it's better to use it for dynamic data, and use getStaticProps for static data, this way you can get the best performance out of your Next.js app.

### Improving the getStaticProps with On Deman Revalidation

One way you can take advantage of this is by using on-demand revalidation. It's a fancy way of saying that you can selectively revalidate certain parts of your app, without having to regenerate the whole thing. You can do this using the getStaticProps and getServerSideProps methods, which let you specify which data needs to be revalidated.

So, we said that static pages are only generated when the build time. But what if we want to serve these pages dynamically and frequently? NextJS 

There is a great feature for revalidating static page content using the NextJS API directory. Here is the official example from NextJS:

```js
// pages/api/revalidate.js

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}
```
I found the best way of revalidating the posts for Contentful Headless CMS is creating a webhook while creating, publishing, and updating. With this way, we can trigger the revalidating functionality in the background.

## In Conclusion

Optimizing the performance of your Next.js app is crucial for building a successful and efficient web application. By using features like getServerSideProps and getStaticProps, you can improve the speed and performance of your app, and make sure that it's running at its best. Remember that performance is not only important for user experience but also for SEO, faster website means better ranking and more traffic. By following the best practices outlined in this article, you can take your Next.js app to the next level and ensure that it's running at its peak performance.

_Note: This article prepared with help of ChatGPT_

## Resources
[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)

[getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)

[getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths)

[Incremental Data Fetching](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation)




Introduction
Welcome to our article on optimizing your Next.js app's performance through the use of getServerSideProps and getStaticProps. As a big NextJS fan,...

Optimizing Next.js App Performance for Speed and SEO

Hello folks, this will be a quick but really handy post. Let's say we are working on a side project that we didn't care the sensitive data like credentials of API keys and we want to make the repo public on Github.

I've found a great tool to clear all the commit history of the specific file, in my case it was `.env.example`. 

The library is called [git-filter-repo](https://github.com/newren/git-filter-repo/) and it is developed with python. 

So, to use the library, first we need to install the python script using:

`pip install git-filter-repo`

and then we are running this code to delete all the history of the selected file:

`git filter-branch --force --index-filter "git rm --cached --ignore-unmatch <the path of file that you want delete>" --prune-empty --tag-name-filter cat -- --all`

When you run the code, you will see the remote branch and local are different. Now, you just need to push your local changes with this command:

`git push origin --force --all`

That's it! Now, when you check the Github, you wont't see any history about that file. 

Hope this will help someone having the same issue.

`



Hello folks, this will be a quick but really handy post. Let's say we are working on a side project that we didn't care the sensitive data like credentials of A...

Removing sensitive data from Git history


## About Nodemailer

[Nodemailer](https://www.npmjs.com/package/nodemailer) is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS SES, and more. In this post, we will be using Nodemailer with TypeScript to send emails from a Next.js application.

Before diving into the code example, let's go over some key concepts of Nodemailer. Nodemailer is a module for Node.js applications to send emails. It supports various transport methods such as SMTP, AWS SES, and more. With Nodemailer, you can send plaintext or HTML emails, attachments, and more.

## Use Cases for Nodemailer

Nodemailer is a versatile library that can be used in a variety of different use cases. Some common use cases include:

- Sending confirmation emails: When a user signs up for a service or makes a purchase, a confirmation email can be sent to their email address to confirm the action.

- Sending password reset emails: When a user forgets their password, a password reset link can be sent to their email address to allow them to reset their password.

- Sending notifications: Applications can send notifications to users via email, such as updates on their account or new features that have been added.

- Sending marketing emails: Applications can send marketing emails to users, such as newsletters or promotional offers.

- Sending bulk emails: Applications can send bulk emails to a large number of users at once, such as in the case of a mass mailing campaign.

- Sending automated emails: Applications can send automated emails in response to certain events or actions, such as when a user's account is about to expire.

- Send HTML email Templates: Applications can use Nodemailer to send HTML email Templates, which can be designed and customized to match the look and feel of the application.

- Sending emails with attachments: Applications can use Nodemailer to send emails with attachments, such as invoices, receipts, or other files.

These are just a few examples of the many use cases for Nodemailer, it is a very flexible library that can be used in many different ways to meet the needs of your application.

In this post, we'll be using the SMTP transport method to send emails using a Gmail account. We will be using TypeScript to write our code, which adds type safety and improved code organization to our application.

Now that we understand the basics of Nodemailer and TypeScript, let's take a look at the code example.

## Implementation of Emailer Class

The code below shows an implementation of the Nodemailer library in TypeScript. The Emailer class is used to send emails using a Gmail account. It uses the `nodemailer.createTransport()` method to create a transporter object, which is used to send emails.

```js

import * as nodemailer from "nodemailer";
import { MailOptions } from "nodemailer/lib/json-transport";

export class Emailer {
  private readonly transporter: nodemailer.Transporter;

  constructor() {
    this.transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.GMAIL_USER,
        pass: process.env.GMAIL_PASSWORD,
      },
    });
  }

  public sendEmail(mailOptions: MailOptions) {
    return this.transporter.sendMail(mailOptions);
  }

  public notifyAdminForNewUser(email: string, username: string) {
    this.sendEmail(notifyAdminNewUserEmailTemplate(email, username));
  }

  public notifyUserForSignup(email: string, username: string) {
    this.sendEmail(newUserEmailTemplate(email, username));
  }
}

export const emailer = new Emailer();

export const newUserEmailTemplate = (email: string, username: string) => {
  return {
    from: process.env.GMAIL_USER,
    to: email,
    subject: `${username}, Welcome to the our website`,
    text: "Welcome to the our website",
    html: `
      <h1>Welcome to our website!</h1>
      <p>We're glad you've decided to join us. We hope you find everything you're looking for here and enjoy using our site.</p>
      <p>If you have any questions or need any help, please don't hesitate to contact us. Thank you for signing up!</p>
    `,
  } as MailOptions;
};

export const notifyAdminNewUserEmailTemplate = (
  email: string,
  username: string
) => {
  return {
    from: process.env.GMAIL_USER,
    to: process.env.GMAIL_USER,
    subject: `New User: ${username} - email: ${email}`,
    text: `New User: ${username} - email: ${email}`,
    html: `
      <h1>New User: ${username}</h1>
      <p>email: ${email}</p>
    `,
  } as MailOptions;
};

```

The class has two methods, `notifyAdminForNewUser` and `notifyUserForSignup`, which use the `sendEmail` method to send emails to the new user and the admin, respectively. The `sendEmail` method takes in a mailOptions object, which contains the recipient's email, subject, and the message.

The `newUserEmailTemplate` and `notifyAdminNewUserEmailTemplate` functions are used to create the `mailOptions` object for the new user and admin emails, respectively. They take in the user's email and username as arguments and return an object with the recipient's email, subject, and message.

It's worth noting that the code is using `process.env.GMAIL_USER` and `process.env.GMAIL_PASSWORD` to authenticate with `gmail`, You should replace it with your own Gmail user and password.

To obtain the Gmail password, you should go to the settings on Gmail and create an App Password, please remember that you need to activate the 2FA for your google account.

## Conclusion

Nodemailer with TypeScript makes it easy to send emails from a Next.js application. With the help of the `Emailer` class and the `mailOptions` object, you can send emails with ease. Of course, this implementation will only work on the server side of the NextJS Application. If you want to send email from client side, you just need to create an API endpoint under the `/pages/api`directory. 

In this post, we've shown how to send emails using a Gmail account, but you can also use other transport methods such as AWS SES to send emails. You can expand the class methods to meet your needs.



About Nodemailer
Nodemailer is a popular library for sending emails in Node.js. It allows you to send emails using various transport methods, such as SMTP, AWS...

Sending Emails with Ease: A Step-by-Step Guide to Using Nodemailer with TypeScript in Next.js

## What is Framer Motion

[Framer Motion](https://www.framer.com/motion/) is a powerful animation library for React. It provides a set of easy-to-use components that allow developers to add animations to their React applications with minimal code.

One of the key features of Framer Motion is its use of the Physics engine, which allows for realistic and natural-feeling animations. This means that animations in Framer Motion respond to the user's interactions in a way that feels more intuitive and less robotic.


## Use cases of Framer Motion

- Page Transitions: Framer Motion can be used to create smooth page transitions, allowing you to create a seamless user experience as users navigate through your application. For example, you can use the AnimatePresence component to fade out the current page while fading in the new page, creating a smooth transition between pages.

- Image Carousels: You can use Framer Motion's animation capabilities to create dynamic and engaging image carousels. For example, you can use the motion.div component to create a slide transition between images, and use the useAnimation hook to control the timing and easing of the animation.

- Animated Buttons: Framer Motion can also be used to add animations to buttons, making them more engaging and interactive. For example, you can use the motion.button component to create an animated button that changes color or size when hovered over, creating a more dynamic and engaging user experience.

- Scroll-Triggered Animations: Framer Motion's useViewportScroll hook can be used to create animations that are triggered when the user scrolls to a certain point on the page. For example, you can use this hook to create a floating effect for an element as the user scrolls down the page.

- Drag and Drop Interactions: Framer Motion's drag and dragControls components can be used to create drag and drop interactions in your application. For example, you can use these components to create a to-do list where users can drag and drop items to reorder them.

- Parallax Scrolling: Framer Motion's useTransform hook can be used to create a parallax scrolling effect, where elements on the page move at different speeds as the user scrolls. This can be used to create a more immersive and dynamic user experience.

Another great feature of Framer Motion is its use of the Animation controls, which allow developers to easily control the timing, duration, and easing of animations. This makes it easy to create complex animations with minimal code and allows for fine-tuning of the animation to achieve the desired effect.


## A Simple Opacity Animation Component 

```js
import { AnimatePresence, motion } from "framer-motion";
import React from "react";

interface AnimateOpacityProps {
  children: React.ReactNode;
}

const AnimateOpacity = ({ children }: AnimateOpacityProps) => (
  <AnimatePresence mode="wait">
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      {children}
    </motion.div>
  </AnimatePresence>
);

export default AnimateOpacity;
```

## Conclusion

In addition to its powerful animation capabilities, Framer Motion also provides a set of layout and gesture components that make it easy to add advanced interactions to your React applications. For example, the layout component allows you to easily create responsive and flexible layouts, while the gesture component provides a set of easy-to-use gestures such as swipe, tap, and press.

Overall, Framer Motion is an excellent choice for developers looking to add animations and advanced interactions to their React applications. Its powerful animation capabilities, intuitive API, and easy-to-use components make it a great choice for both beginners and experienced developers alike.

If you're looking to add animations to your React projects, Framer Motion is definitely worth checking out. It's easy to use, powerful, and provides a great set of features that make it a great choice for any React developer.


What is Framer Motion
Framer Motion is a powerful animation library for React. It provides a set of easy-to-use components that allow developers to add animatio...

Animate everything with Framer Motion


## Introduction

In this post, we will learn how to set up user authentication in a Next.js application using Firebase. Firebase is a popular backend-as-a-service provider that offers a variety of tools for building web and mobile applications, including user authentication. By the end of this tutorial, you will have a basic understanding of how to use Firebase to authenticate users in your Next.js application, allowing them to sign in, sign up, and sign out.

## Getting Started

The first step will create a project under [firebase console](https://console.firebase.google.com), once you create a web project, firebase will provide you a code snippet to use on the client side.

```javascript
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
 apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
 authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
 projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
 storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
 messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
 appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};


// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

```

## Client Side Authentication 

Once you initialize the firebase app, you are good to go!

Firebase has a lot of providers for authentication, like social logins with Google, Github, Apple, Facebook and etc. Also, you can choose a simple email and password login. In this example, I’ll create the users manually, since only admin users will be able to log in.

After selecting the provider and creating the users, we can start building our sign-in logic.

```jsx

 import { auth } from 'configs/firebase-config';
 import { onIdTokenChanged, User } from 'firebase/auth';

 const [admin, setAdmin] = useState<User | null>(null);

 useEffect(() => {
   const unsubscribe = onIdTokenChanged(auth, async (user) => {
     if (user) {
       setAdmin(user);
     } else {
       setAdmin(null);
     }
   });

   return unsubscribe;
 }, []);
```

So, we will use this useEffect hook on the login page, if someone logs in, it automatically assigns the user to our state. And this is the actual login function:

```js
import { signInWithEmailAndPassword } from 'firebase/auth';

 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

 const signInwithFirebase = async () => {
   try {
     await signInWithEmailAndPassword(auth, email, password);
   } catch (error: FirebaseError | unknown) {
     if (error instanceof FirebaseError) {
        console.log(code);
     }
   }
 };

```

That’s it! Now you are authenticated with Firebase Auth. After this point, you can create a Context Provider to store the Auth User in the whole application.

There is one caveat in this approach and that is SSR. Since we are checking the authentication on the client side, when we first load the page, we might get some flickery behaviors. But wait, there is a solution for this also! 

## Server Side Authentication - Power of the “getServerSideProps”

So, the basic idea is that we need to validate the authenticated user on the backend server before loading the page. Able to do this, we need another library called firebase-admin, with this library we are able to do a lot of things such as creating users, databases, and validations.

Here is the basic configuration of the firebase-admin app:

```js

import * as admin from 'firebase-admin';

/* eslint-disable import/prefer-default-export */
import { credential } from 'firebase-admin';
import { initializeApp } from 'firebase-admin/app';

const serviceAccount = require('ServiceAccountFile.json');

if (!admin.apps.length) {
 initializeApp({
   credential: credential.cert(serviceAccount),
 });
}

export const adminSDK = admin;

```

Once we configured the adminSDK, we can use it on our application. 

So, the logic of the server side auth verification is that we need to validate the users token on the backend. So, once we are logged in as a user, firebase gives us a unique user token. Somehow we need to pass this token value to our backend and the best way to do this cookies! 

Here is the implementation of the server side validation of the authenticated user:

```js
import nookies from 'nookies';
import { adminSDK } from 'configs/firebase-admin-config';

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 const cookies = nookies.get(ctx);
 if (!cookies.token) {
   return {
     props: {
       isLoggedIn: false,
     },
   };
 }

 try {
   const token = await adminSDK.auth().verifyIdToken(cookies.token);
   if (!token) {
     return {
       props: {
       	isLoggedIn: false,
       },
     };
   }

   // the user is authenticated!
   const { uid } = token;
   const user = await adminSDK.auth().getUser(uid);

   return {
     props: {
       isLoggedIn: true,
     },
   };
 } catch (error) {
   return {
     props: {
       isLoggedIn: false,
     },
   };
 }
}

```


And of course, once we logged on the client side we need to store the user token in the cookies. So, the client side implementation will be change a little bit.

```js
useEffect(() => {
   const unsubscribe = onIdTokenChanged(auth, async (user) => {
     if (user) {
       setAdmin(user);
       const token = await user.getIdToken();
       nookies.set(undefined, 'token', token, { path: '/' });
     } else {
       setAdmin(null);
       nookies.set(undefined, 'token', '', { path: '/' });
     }
   });

   return unsubscribe;
 }, []);

```

## Conclusion

That’s it! Now, you have both client and server-side authentication. Using this approach you can create excellent web applications.
We have learned how to set up user authentication in a Next.js application using Firebase. We have seen how Firebase makes it easy to handle user registration and login, and how to use Firebase's authentication API to authenticate users in our application. We also saw how to use Firebase's Firestore to store user data and how to protect routes based on the authenticated user. With this knowledge, you should now be able to add user authentication to your Next.js applications easily and securely. Happy hacking!


Introduction
In this post, we will learn how to set up user authentication in a Next.js application using Firebase. Firebase is a popular backend-as-a-service p...

Authentication with Firebase in NextJS, with SSR!


## **Introduction**

Headless CMS, also known as a "decoupled" or "content as a service" CMS, is a system that separates the content management and delivery systems. This allows for the content to be delivered to any digital channel or device through an API, while the content management system can be updated and managed separately. This can provide more flexibility and scalability for organizations with multiple digital channels and devices, as well as the ability to use different technology stacks for the front-end and back-end systems.

## **The reasons why to use a Headless CMS**

**Flexibility**: A headless CMS allows for the delivery of content to any digital channel or device, as the content is not tied to a specific front-end system. This means that the organization can use different technology stacks for the front-end and back-end systems, providing more flexibility in terms of how the content is displayed.

**Scalability**: A headless CMS can also be more scalable than traditional CMSs, as it allows for the separation of the content management and delivery systems. This means that the organization can add new digital channels or devices without having to update the CMS.

**Speed and performance**: With headless CMS, since the front end is separate, it can be optimized for speed and performance, as it doesn't have to handle the weight of a traditional CMS.

**Cost**: A headless CMS can also be more cost-effective than traditional CMSs, as it allows for the use of existing front-end systems, which can reduce development costs.

**Development**: With headless cms, developers can focus on the front end, and the back end is handled by a separate team, which could lead to a more efficient workflow and faster development.


## **Most Common/Powerful Headless CMS Services**

There are several popular and powerful headless CMS services available on the market. Some of the most common and powerful ones include:

**Contentful**: Contentful is a cloud-based headless CMS that allows users to create, manage, and distribute content across multiple platforms and devices. It features a simple and intuitive interface, a robust API, and a variety of integrations and tools.

**Strapi**: Strapi is an open-source headless CMS that allows users to create, manage, and distribute content via an API. It features a user-friendly interface, a variety of plugins, and a large community of developers.

**Prismic**: Prismic is a SaaS headless CMS that provides a user-friendly interface, a robust API, and a variety of integrations and tools. It is also great for multi-language sites, and it's easy to use for non-technical editors

**Sanity**: Sanity is a headless CMS that provides a user-friendly interface and a robust API. It is great for developers as it's easy to use, has a lot of integrations and plugins, and it's built on React.

Wordpress with GraphQL: Wordpress is a powerful CMS for like two decades and still %30 of the internet is powered by Wordpress. Wordpress has built-in REST API support and it can be used for a great tool as a headless CMS. Also, there is even better tool called WPGraphQL, and it will make it more powerful to use with GraphQL. 

These are just a few examples of the many headless CMS services that are available. The best one for you will depend on your specific needs and requirements. 

**mystickynotes.net** is powered by Contentful, and it has great features and if you are planning to use it, I would highly recommend it. There will be more detailed posts about usage for Contentful and Wordpress with GraphQL. Please stay tuned :) 



Introduction
Headless CMS, also known as a "decoupled" or "content as a service" CMS, is a system that separates the content management and delivery systems. Th...

The world of Headless CMS: Contenful, Strapi and Wordpress

There is a really handy npm package to create sitemaps for your NextJS application, [next-sitemap](https://www.npmjs.com/package/next-sitemap) can be used for both main pages and also dynamically created pages. Be able to use this:

First, install the package:

`npm i next-sitemap`

Add postbuild script to package.json:

`"postbuild": "next-sitemap"`

Create a file for the configurations in the root folder named next-sitemap.config.js

```js
module.exports = {
    siteUrl: process.env.NEXT_PUBLIC_BASE_URL,
    generateRobotsTxt: true,
    exclude: ["/api/**"],
    robotsTxtOptions: {
        additionalSitemaps: [
            `${process.env.NEXT_PUBLIC_BASE_URL}/server-sitemap.xml`,
            `${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`
      ]
    }
}
```

Now, when you navigate the **website.com/server-sitemap** you will get all the dynamically created sitemap URLs.


There is a really handy npm package to create sitemaps for your NextJS application, next-sitemap can be used for both main pages and also dynamically created pa...

Sitemap for NextJS Application

To solve the issue, add 'secret: process.env.NEXT_SECRET' to NextAuth Config with this way we are exposing the env. variables to use on AWS Amplify.


```
export default NextAuth({
    // Configure one or more authentication providers
    providers: [
        GoogleProvider(
            {
                clientId: process.env.GOOGLE_CLIENT_ID!,
                clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
                authorization: {
                    params: {
                        prompt: "consent",
                        access_type: "offline",
                        response_type: "code",
                    }
                },
            }
        )
  ],
  secret: process.env.NEXT_SECRET,
})
```


And also, in the build settings section on AWS Amplify add each env variable as:

```

 build:
   commands:
    - echo "NEXT_PUBLIC_SANITY_DATASET=$NEXT_PUBLIC_SANITY_DATASET" >> .env
    - echo "NEXT_PUBLIC_SANITY_PROJECT_ID=$NEXT_PUBLIC_SANITY_PROJECT_ID" >> .env
    - echo "SANITY_API_TOKEN=$SANITY_API_TOKEN" >> .env
    - echo "NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL" >> .env
    - echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env
    - echo "GOOGLE_CLIENT_SECRET=$GOOGLE_CLIENT_SECRET" >> .env
    - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
    - echo "NEXT_SECRET=$NEXT_SECRET" >> .env
    - npm run build
```



To solve the issue, add 'secret: process.env.NEXT_SECRET' to NextAuth Config with this way we are exposing the env. variables to use on AWS Amplify.
export defa...

NextAuth AWS Amplify Problem

To update VSCode on Ubuntu, you can use the following steps:


```
wget 'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64' -O /tmp/code_latest_amd64.deb
sudo dpkg -i /tmp/code_latest_amd64.deb
```

To update VSCode on Ubuntu, you can use the following steps:
wget 'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64' -O /tmp/code_latest...

Update VSCode to latest on Ubuntu

Using `<Script>` components that NextJS provides, you can add Google Analytics to your project. So, you will be added to GA for your project.

 ```
<Script       
     strategy="lazyOnload"
        src={"https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"}
      />
      <Script id="google-analytics-script" strategy="lazyOnload">
        {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXX');
          `}
 </Script>
```

 Happy Hacking!

Using <Script> components that NextJS provides, you can add Google Analytics to your project. So, you will be added to GA for your project.
<Script       
    s...

Featured Post

Optimizing Next.js App Performance for Speed and SEO