Tutorials


Adding fonts using the `next/font` package to your Next.js project allows you to load type-safe and optimized fonts in your Next.js app.

While adding the `next/font` package to your Next.js project is relatively straightforward, doing it using the experimental `app` directory is a bit more involved: in fact, the current solution in the documentation delays thr loading of global stylesheets, making the font flickering very noticeable. In this tutorial, I will show you how to add fonts to your Next.js project using the `app` directory and the new RSC layouts.

Additionally, I will show you how to add fonts to your Tailwind configuration file, so that you can use them in your components.

NB: this is likely a temporary solution until the `next/font` package is updated to support the `app` directory.

## Using the `next/font` package

The `next/font` package allows us to import Google Fonts and store them locally, imported as Typescript functions.

For example, we can import the popular font `Inter` from Google Fonts:

```tsx
import {
  Inter as SansFont
} from 'next/font/google';
```

Next, we want to define a client component that we use in the root layout to load the fonts. Since we need to mark it a `client` component, we will create a new file.

Then, we use the new function `useServerInsertedHTML` from the `next/navigation` package to insert the font styles in the `<head>` of the page. Since the component does not need to render anything, we return `null`.

Below is the full code for the `Fonts` component:

```tsx filename=app/Fonts.tsx
'use client';

import { Inter as SansFont } from 'next/font/google';
import { useServerInsertedHTML } from 'next/navigation';

const sans = SansFont({
  subsets: ['latin'],
  variable: '--font-family-sans',
  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
  weight: ['300', '400', '500', '600', '700', '800'],
  display: 'swap',
});

function Fonts() {
  useServerInsertedHTML(() => {
    return (
      <style
        dangerouslySetInnerHTML={{
          __html: `
          :root {
            --font-family-sans: '-apple-system', 'BlinkMacSystemFont',
              ${sans.style.fontFamily}, 'system-ui', 'Segoe UI', 'Roboto',
              'Ubuntu', 'sans-serif';
          }
        `,
        }}
      />
    );
  });

  return null;
}

export default Fonts;
```

Ideally, you'd define your fonts in your Tailwind configuration file assigned to the variable `--font-family-sans`:

```js
module.exports = {
  theme: {
    fontFamily: {
      sans: ['--font-family-sans', 'sans-serif'],
    },
  },
};
```

Now, we can add this component to the root layout, so that it is rendered on every page.

```tsx
import './globals.css';
import Fonts from '~/components/Fonts';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang={'en'}>
      <Fonts />

      <body>{children}</body>
    </html>
  );
}
```

## Conclusion

In this tutorial, we learned how to add fonts to our Next.js project using the `next/font` package and the new RSC layouts. This is a temporary solution since it will probably be fixed by the Next.js team, but for now it's the best way I found to use the `next/font` package with the new Next.js app directory.




How to add fonts to your Next.js 13 RSC app directory


Next.js Server Components in the new app directory leverage React Server components to render these special components on the server. 

Next.js allows us to leverage Server Components for writing layouts and pages, but what about client-only code? In this tutorial, we'll learn how to write client-only code in Next.js Server Components.

Sometimes, we need to write code that executes only in the client. For example, we might want to use a library that only works in the browser or some code that needs the browser's API to work.

In my case, I wanted to run a side effect such as setting the page's theme based on the user's system preferences. Since this needs to run in the client, I can't do it in the server, and I was struggling to add the required code to make a server component run some code only when running in the client.

Other examples can include:
- reading or writing to the browser's local storage
- using some browser's API such as the Geolocation API or Intersection Observer API
- using a library that only works in the browser (for example, some charts libraries)

In my case, I wanted to add code that executed in **every page**, but only **when running in the client**. To do so, I added the code to the root layout, eg. the `layout.tsx` file within the `app` directory.

Below is the simplest root layout that I could write:

```tsx filename=layout.tsx
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  );
}
```

Now, let's assume we want to add some code that runs only in the client, but that we define once for all pages. 

We can do so by creating a further client component, which I name `ThemeSetter`: this component runs when server-rendered and on the client, but is not a Server Component.

```tsx filename=ThemeSetter.tsx
'use client';

import { useEffect } from 'react';

function ThemeSetter() {
  useEffect(() => {
    if (typeof window !== undefined) {
      // execute your logic here
    }
  }, []);

  return null;
}
```

The component above does not render anything: in my case, I simply want to read or set a value, but of course, you can render something if you want.

Now, we can safely add this component to the root layout:

```tsx filename=layout.tsx
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>{children}</body>

      <ThemeSetter />
    </html>
  );
}
```

Et voilà! We can now execute some code only in the client, but that is defined once for all pages, using the new Next.js Server Components.

If you have any questions, feel free to reach out!

How to write client-only code in Next.js Server Components


The Tanstack Table component is by far Makerkit's recommended component for displaying tabular data. Being a lower-level component, it is not as opinionated as the other components and can be used in a variety of ways. It is extremely flexible, which means it needs more boilerplate code to use.

In this snippet, we will build a Table component that can be used to display tabular data. We will use Tailwind CSS for styling and the Tanstack Table component for the table itself. 

The goal is to make it simpler to display tabular data in React.js, by reducing the boilerplate and keeping the code DRY.

This table component can:

1. Display tabular data
2. Display sub-components for each row
3. Paginate the data

Let's get started!

## The component's props

The Table component will accept the following props:

```tsx
import type {
  ColumnDef,
  Row,
  PaginationState,
} from '@tanstack/react-table';

interface ReactTableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
  pageIndex?: number;
  pageSize?: number;
  pageCount?: number;
  onPaginationChange?: (pagination: PaginationState) => void;
  className?: string;
}
```

The simplest version of your table will look like this:

```tsx
<Table data={data} columns={columns} />
```

## The Table component

Let's start by creating the Table component. We will use the Tanstack Table component for the table itself. We will also use Tailwind CSS for styling.

### Third-party packages

Additionally, we will use the following packages:
- `classnames` for conditionally applying CSS classes
- `@heroicons/react` for the pagination icons
- a few internal Makerkit components such as `IconButton`.

Treat these as details and feel free to replace these with your own components.

### The React.js table component

Now, let's create the React.js table component. Below is the full code for the component:

```tsx
import { Fragment, useEffect, useState } from 'react';

import {
  getCoreRowModel,
  useReactTable,
  flexRender,
} from '@tanstack/react-table';

import type {
  ColumnDef,
  Row,
  Table as ReactTable,
  PaginationState,
} from '@tanstack/react-table';

import classNames from 'classnames';
import IconButton from '~/core/ui/IconButton';

import {
  ChevronDoubleLeftIcon,
  ChevronDoubleRightIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from '@heroicons/react/24/outline';

interface ReactTableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
  pageIndex?: number;
  pageSize?: number;
  pageCount?: number;
  onPaginationChange?: (pagination: PaginationState) => void;
  className?: string;
}

function Table<T extends object>({
  data,
  columns,
  renderSubComponent,
  pageIndex,
  pageSize,
  pageCount,
  onPaginationChange,
  className,
}: ReactTableProps<T>) {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: pageIndex ?? 0,
    pageSize: pageSize ?? 15,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    pageCount,
    state: {
      pagination,
    },
    onPaginationChange: setPagination,
  });

  useEffect(() => {
    if (onPaginationChange) {
      onPaginationChange(pagination);
    }
  }, [pagination, onPaginationChange]);

  return (
    <div className="flex flex-col">
      <div className="overflow-x-auto">
        <div className="inline-block min-w-full py-1">
          <div className="overflow-hidden p-1">
            <table className={classNames(`Table min-w-full`, className)}>
              <thead>
                {table.getHeaderGroups().map((headerGroup) => (
                  <tr key={headerGroup.id}>
                    {headerGroup.headers.map((header) => (
                      <th key={header.id}>
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )}
                      </th>
                    ))}
                  </tr>
                ))}
              </thead>

              <tbody>
                {table.getRowModel().rows.map((row) => (
                  <Fragment key={row.id}>
                    <tr
                      className={classNames({
                        'bg-gray-50 transition-colors dark:bg-black-300':
                          row.getIsExpanded(),
                      })}
                    >
                      {row.getVisibleCells().map((cell) => (
                        <td
                          style={{
                            width: cell.column.getSize(),
                          }}
                          key={cell.id}
                        >
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext(),
                          )}
                        </td>
                      ))}
                    </tr>

                    {renderSubComponent ? (
                      <tr key={row.id + '-expanded'}>
                        <td colSpan={columns.length}>
                          {renderSubComponent({ row })}
                        </td>
                      </tr>
                    ) : null}
                  </Fragment>
                ))}
              </tbody>
            </table>
          </div>

          <Pagination table={table} />
        </div>
      </div>
    </div>
  );
}

function Pagination<T>({
  table,
}: React.PropsWithChildren<{
  table: ReactTable<T>;
}>) {
  return (
    <div className="flex items-center gap-2">
      <IconButton
        onClick={() => table.setPageIndex(0)}
        disabled={!table.getCanPreviousPage()}
      >
        <ChevronDoubleLeftIcon className={'h-5'} />
      </IconButton>

      <IconButton
        onClick={() => table.previousPage()}
        disabled={!table.getCanPreviousPage()}
      >
        <ChevronLeftIcon className={'h-5'} />
      </IconButton>

      <IconButton
        onClick={() => table.nextPage()}
        disabled={!table.getCanNextPage()}
      >
        <ChevronRightIcon className={'h-5'} />
      </IconButton>

      <IconButton
        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
        disabled={!table.getCanNextPage()}
      >
        <ChevronDoubleRightIcon className={'h-5'} />
      </IconButton>

      <span className="flex items-center gap-1 text-sm">
        <div>Page</div>

        <strong>
          {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
        </strong>
      </span>
    </div>
  );
}

export default Table;
```

### Usage

Now, let's use the table component in our app. Assuming you want to use the table on a page, you can do the following:

```tsx
function App() {
  const data = [
    {
      id: 1,
      name: 'John Doe',
      email: ''
    },
  ];

  const columns = [
     {
      id: 'id',
      header: 'Id',
      accessorKey: 'id',
      cell: (ctx) => ctx.getValue(),
    },
    {
      id: 'name',
      header: 'Name',
      accessorKey: 'name',
      cell: (ctx) => ctx.getValue(),
    },
    {
      id: 'email',
      header: 'Email',
      cell: (ctx) => {
        const { email } = ctx.row.original;

        return <span className='font-bold'>{email}</span>
      },
    },
  ];

  return <Table data={data} columns={columns} />
}
```

The above is a very simple example of how to use the table component. To see a more complex example, check out our article for paginating data with React.js and Supabase.

### Conclusion

In this article, we have seen how to create a table component using React.js and Tanstack. The component above is very basic and can be extended to support more features, but can be used as a starting point for your own table component.

If you have any questions, feel free to join the Discord server!

A reusable Table component for React.js


It can be useful to retrieve the list of the currently changed files in a
git repository.

For example, you might want to run a script only if a
specific file has been changed, such as when indexing a search engine with
new content that has been added to a repository: we use this technique in
this website when a new post is added or an existing one is updated.

To write the script, we will use:
1. the `git diff` command
2. and Node.js

```ts
import { execSync } from 'child_process';

function getChangedFiles(extension: string = '') {
  const extensionFilter = extension ? `-- '***.${extension}'` : '';
  const command = `git diff HEAD^ HEAD --name-only ${extensionFilter}`;
  const diffOutput = execSync().toString(command);

  return diffOutput.toString().split('\n').filter(Boolean);
}
```

The `getChangedFiles` function takes an optional `extension` parameter that
will filter out the files that do not have the given extension.

For example, if we want to retrieve the list of the changed files that have a
`.mdx` extension, we can call the function like this:

```ts
const changedFiles = getChangedFiles('mdx');
```

The `getChangedFiles` function will return an array of the changed files
whose path starts from the current directory.

That's it! Hope you found this snippet useful. Ciao!


Get changed files in a git repository with Node.js


Firebase is a great platform for building serverless applications. It provides a lot of great features out of the box, such as authentication, database, storage, and hosting. 

However, one of the downsides of using Firebase is that it can be slow to start up: this is because Firebase is a serverless platform, which means that it doesn't have any servers running all the time. 

Instead, it starts up a server when a request comes in, and then shuts it down when the request is complete. This is great for saving money, but it can be slow to start up, especially when loading the Firestore Admin SDK in your API function. This has been a [very popular issue on the Firebase community forums](https://issuetracker.google.com/issues/158014637): the only solution was switching to a REST API, which meant not being able to rely on the official SDK.

In this post, I want to share two tips to reduce and boost your Firebase cold start times, thanks to recent updates to the Firebase Functions and the Firestore Admin SDK.

## 1. Switch to the Firestore REST API

If you update your [Firestore Admin Node.js SDK to version 9.14.0](https://github.com/firebase/firebase-admin-node/releases/tag/v11.4.0) or higher, you can now use the Firestore Admin SDK using REST calls instead of the gRPC protocol. This will immediately boost your cold start times since the Firestore Admin SDK no longer needs to access files from the file system.

NB: this will improve your cold start times regardless of which platform you use, such as AWS, Vercel or Netlify. In fact, this issue existed in all serverless platforms, not just Firebase Functions.

### How to enable the Firestore REST API

To enable the Firestore REST API, you need to update your `firebase-admin` package to version 9.14.0 or higher, and then update your `firebase-admin/firestore` settings when creating the Firestore instance.

For example, you can use the function below and replace your plain `getFirestore` instances:

```tsx
import { getFirestore, Firestore } from 'firebase-admin/firestore';

let firestore: Firestore;

/**
 * @name getRestFirestore
 * @description Get the Firestore instance with REST API enabled. This is
 * faster than the default Firestore instance which uses GRPC.
 */
function getRestFirestore() {
  // prevent multiple instances of Firestore
  if (firestore) {
    return firestore;
  }

  firestore = getFirestore();

  // enable REST API for faster Firestore operations
  firestore.settings({
    preferRest: true,
  });

  return firestore;
}

export default getRestFirestore;
```


Now, use `getRestFirestore` instead of `getFirestore` in your functions whenever you're loading the Firestore SDK in your API functions.

## 2. Use the new Firebase Functions v2

If you are using Firebase Functions, you can further reduce your cold start times by switching to the new [Firebase Functions v2](https://firebase.google.com/docs/functions/beta).

The Firebase Functions v2 now uses Google Cloud Run: a more modern and faster serverless product with better control, configuration and monitoring.

The most important change is that Function instances can now execute more than one request at a time: new functions with 1 dedicated CPU or higher will default to 80 concurrent requests. This means that your functions will be able to handle more requests at the same time, which **will reduce the number of cold starts**.

How to reduce and boost your Firebase cold start times


Since updating React 18, Next.js has been stricter when it comes to hydrating the client-side after the page was server-rendered initially on the server.

In fact, you likely keep seeing errors such as "Text content does not match server-rendered HTML" when the page loads. It took a while for me to understand it, hoping it was a bug in React; but as it turned out, it was an error on my end.

While upgrading Makerkit to React 18, I found two common issues:

1. The HTML was invalid - e.g. malformed
2. Conditional Rendering based on browser vs server conditions

## Malformed HTML

Malformed HTML doesn't automatically mean it will render badly as browsers are capable of handling these situations fairly well. As such, it's rather hard being able to locate places where we used a tag in the wrong place, such as in the code below:

```tsx
<p>
  { */ Wrong! */ }
  <div>
    {children}
  </div>
<p>
```

In the example above, `p` shouldn't be a parent of `div`. Browsers may be forgiving, but other DOM implementations may not, stripping the internal invalid tags. **This is why the server and the browser end up rendering different HTML strings**, even when there is no apparent difference between the two.

The fix here is very simple: **make sure you write syntactically valid HTML code**.

## Conditional Rendering

Very often, we only want to display a value on the client instead than on the server. In Makerkit's SaaS boilerplate for Next.js, this issue happens a lot, because we cannot run the Web Firebase SDK on the server.

Therefore, to avoid rendering on the server, we used to do the following checks:

```tsx
{ isBrowser() ? <MyComponent /> : null }
```

And the above still looks fine, but React 18 didn't quite like it. To solve this issue, we used `next/dynamic` to import the components dynamically and by setting the option `ssr` to `false`:

```tsx
import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import(`./MyComponent.tsx`), {
  ssr: false
});

// somewhere in your code simply render the component
return <MyComponent />
```

And this solved the second issue. To summarize, whenever you're using conditions to avoid rendering components on the server with Next.js and React 18, simply use a dynamic import instead.

I hope these two solutions will help you fix your hydration issues. If you have any questions, do [contact me](/contact)!



How to fix common hydration issues in Next.js and React 18


Tailwind CSS is the hottest CSS framework in the past few years: it's fun and easy to use, with wonderful defaults that make designing beautiful UIs a breeze.

To install TailwindCSS in your Next.js project, run the following command:

```
npm install -D tailwindcss postcss
```

### Initialize the Tailwind CSS configuration

Afterward, we run the following command to initialize the Tailwind configuration:

```
npx tailwindcss init
```

This will create a file named `tailwind.config.js` in your root folder. We have to change the `content` glob to use files with the `tsx` extension:

```js
/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["./**/*.{tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### Add the PostCSS configuration file

Additionally, we have to create a `postcss` configuration that Next.js will automatically pick up. To do so, create a file names `postcss.config.js` in your root folder and add the following content:

```js
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

```

### Import Tailwind CSS in your styles

At this point, we have to import Tailwind CSS in your global styles, normally located at `styles/index.css`. To do so add the following content to your main CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

To test if this works, visit your home page at `pages/index.tsx` and add some styles such as:

```html
<h1 className='text-5xl'>
  This is Tailwind CSS with Next.js!
</h1>
```

## Installing the Tailwind CSS Prettier plugin

If you're using Prettier, you can install a plugin to automatically sort the class names in your HTML tags according to the best practices prescribed by the Tailwind CSS team, so to make your code clean and consistent.

To install the Prettier plugin, use the following command:

```
npm i prettier-plugin-tailwindcss
```

If it's all good, you don't have to do anything else, it will simply work when running Prettier, which we recommend doing each time you save your files.


Add Tailwind CSS to Next.js


In this post, we will learn how to use Firebase Auth to log users out and redirect them out of the application with Next.js.

To do so, we will use a component wrapper named `GuardedPage` that you can use to wrap your page components that are protected from non-authenticated users.

To do so, let's create a component named `AuthRedirectListener`, which takes care of setting up a listener with Firebase Auth to detect when the user logs out.

Here is the usage of our component:

```tsx
<AuthRedirectListener whenSignedOut='/auth/login'>
  {children}
</AuthRedirectListener>
```

This component is private and will be part of another component named `GuardedPage`, which is public and intended to be used for wrapping page components. 

In fact, the `GuardedPage` component checks that the code is running within the browser because it uses the web Firebase SDK, and thus we are unable to use server-side rendering; if rendering on the server, we simply render the children components instead of `AuthRedirectListener`.
 
```tsx
<GuardedPage whenSignedOut='/auth/login'>
  <MyPrivateComponent />
</GuardedPage>
```

## Detecting the user signed out with Firebase Auth
 
To detect when the user signed out, we can use `onAuthStateChanged`, a function that will call a callback function when the user's authentication state changes. 

To understand that the user logged out, we check if the `user` parameter is undefined or not.

Let's take a look at how it's done:

```tsx
const listener = auth.onAuthStateChanged((user) => {
  // make sure the user provided a URL where to 
  // redirect the users after they sign out
  const shouldLogOut = !user && whenSignedOut;

  // log user out if user is falsy
  // and if the consumer provided a route to redirect the user
  if (shouldLogOut) {
    const currentPath = window.location.pathname;
    const isNotCurrentPage = currentPath !== whenSignedOut;

    const navigateToSignOutPage = () => {
      window.location.assign(whenSignedOut);
    };

    // we then redirect the user to the page
    // specified in the props of the component
    if (isNotCurrentPage) {
      navigateToSignOutPage();
    }
  }
});
```

As you can see from the snippet above, we check that the parameter `user` is `undefined` to understand if the user is still signed-in. 

When the `user` parameter is `undefined` and when the consumer provided a URL where to take the user, we make a browser redirect towards the URL provided with the follow line:

```tsx
window.location.assign(whenSignedOut);
```

## The GuardedPage component to guard protected components in a Next.js application

Of course, this code should run:

1. The user has logged in
2. When the page renders and when the dependencies change

That means, we have to use a `useEffect` hook to call this side-effect, so that it will only be executed at page load (and avoid needless multiple callbacks) or if the dependencies change (but they shouldn't).

To check if the user signed in, we use the following Hook:

```tsx
import { useAuth, useSigninCheck } from 'reactfire';

const { status } = useSigninCheck();

 useEffect(() => {
    // this should run once and only on success
    // i.e. when the user signed in!
    if (status !== 'success') {
      return;
    }

    // code to execute here...
 });
```

Below, you can find the complete snippet of the component `GuardedPage`:

```tsx filename=GuardedPage.tsx
import { useEffect } from 'react';
import { useAuth, useSigninCheck } from 'reactfire';

const AuthRedirectListener: React.FCC<{
  whenSignedOut?: string;
}> = ({ children, whenSignedOut }) => {
  const auth = useAuth();
  const { status } = useSigninCheck();

  useEffect(() => {
    // this should run once and only on success
    if (status !== 'success') {
      return;
    }

    // keep this running for the whole session
    // unless the component was unmounted, for example, on log-outs
    const listener = auth.onAuthStateChanged((user) => {
      const shouldLogOut = !user && whenSignedOut;

      // log user out if user is falsy
      // and if the consumer provided a route to redirect the user
      if (shouldLogOut) {
        clearFirestoreCache();

        const currentPath = window.location.pathname;
        const isNotCurrentPage = currentPath !== whenSignedOut;

        const navigateToSignOutPage = () => {
          window.location.assign(whenSignedOut);
        };

        // we then redirect the user to the page
        // specified in the props of the component
        if (isNotCurrentPage) {
          navigateToSignOutPage();
        }
      }
    });

    // destroy listener on un-mounts
    return () => listener();
  }, [auth, status, whenSignedOut]);

  return <>{children}</>;
};

export default function GuardedPage({
  children,
  whenSignedOut,
}: React.PropsWithChildren<{
  whenSignedOut?: string;
}>) {
  const shouldActivateListener = isBrowser();

  // we only activate the listener if
  // we are rendering in the browser
  if (!shouldActivateListener) {
    return <>{children}</>;
  }

  return (
    <AuthRedirectListener whenSignedOut={whenSignedOut}>
      {children}
    </AuthRedirectListener>
  );
}
```

## Logging Users out with Firebase Auth

Now that our component will automatically redirect the user out when they sign out, let's see how to create a logout button with React. To do so, we create a smart button component that imports the Firebase Auth SDK and calls the method to sign users out:

```tsx
function LogoutButton() {
  const auth = useAuth();

  const onSignOut = useCallback(() => {
    void auth.signOut();
  }, [auth]);

  return (
    <button onClick={onSignOut}>Sign Out</button>
  );
}
```

Your page will look somewhat similar to the below:

1. The `LogoutButton`, somewhere deep in the component tree, will be responsible for calling the auth SDK and signing users out
2. The `GuardedPage` component will listen and redirect the user out when it detects the user signs out

```tsx
<GuardedPage whenSignedOut='/sign-in'>
  <LogoutButton />
</GuardedPage>
```

Logging users out with Firebase Auth and Next.js


In this post, we will show how to generate an RSS feed for your Next.js blog.

The Makerkit SaaS template for Next.js stores much of the configuration within a central file at `~/configuration.ts`, thus we will import this file and retrieve all the data we need. In your application, it may be different, so just be sure you get the correct configuration (or write it inline).

### Installing the feed package

We're going to install the `feed` package that helps us write a Feed object:

```
npm i feed --save-dev
```

### Loading the next.js environment variables programmatically

If you are using environment variables, remember that you need to load them before running the script: to do so, you can manually do it using the function `loadEnvConfig` from `@next/env`.

### The RSS Feed script

Now, we can finally write the script to create an RSS file with Next.js.

1. First, we have to fetch all the posts we want to add to the feed: this is going to be wildy different based on your CMS or other approach, so we will simply abstract it with a function named `getAllPosts`
2. We load the environment variables from Next.js. This has to be done before loading the configuration.
3. We retrieve the website configuration from `configuration.ts`
4. We iterate over the articles and then we add them to the feed
5. We write the feed to the public folder in various formats

Below is the full script:

```tsx filename=rss.ts
import { Feed } from 'feed';
import { writeFileSync } from 'fs';
import { loadEnvConfig } from '@next/env';

// call {loadEnvConfig} before importing "configuration" to populate the environment variables
loadEnvConfig('.');

import Article from './types/post';
import { getAllPosts } from './api';
import configuration from '../../configuration';

const DEFAULT_RSS_PATH = 'public/rss.xml';
const DEFAULT_JSON_PATH = 'public/rss.json';
const DEFAULT_ATOM_PATH = 'public/atom.xml';

const SITE_URL = configuration.site.url;
const SITE_DESCRIPTION = configuration.site.description;
const SITE_TITLE = configuration.site.name;
const SITE_LANGUAGE = configuration.site.language;

function generateRSSFeed(articles: Article[]) {
  const baseUrl = SITE_URL;

  const author = {
    email: configuration.site.email,
    link: configuration.site.twitterHandle,
  };

  const feed = new Feed({
    title: SITE_TITLE,
    description: SITE_DESCRIPTION,
    id: baseUrl,
    link: baseUrl,
    favicon: `${baseUrl}/assets/favicon/favicon.ico`,
    language: SITE_LANGUAGE ?? `en`,
    feedLinks: {
      rss2: `${baseUrl}/rss.xml`,
      json: `${baseUrl}/rss.json`,
      atom: `${baseUrl}/atom.xml`,
    },
    author,
    copyright: '',
  });

  articles.forEach((article) => {
    // NB: change the below according to your CMS data structure!
    const {
      date,
      slug,
      title,
      content,
      excerpt: description,
      collection,
      live,
      coverImage,
    } = article;

    if (!live) {
      return;
    }

    const url = `${baseUrl}/blog/${collection.slug}/${slug}`;

    feed.addItem({
      title,
      id: url,
      link: url,
      description,
      content,
      author: [author],
      date: new Date(date),
      image: `${baseUrl}${coverImage}`,
    });
  });

  writeFileSync(DEFAULT_RSS_PATH, feed.rss2());
  writeFileSync(DEFAULT_ATOM_PATH, feed.atom1());
  writeFileSync(DEFAULT_JSON_PATH, feed.json1());
}

function main() {
  console.log(`Generating RSS Feed...`);

  try {
    generateRSSFeed(getAllPosts());

    console.log(`RSS Feed generated successfully...`);
    process.exit(0);
  } catch (e) {
    console.error(`RSS Feed not generated: ${JSON.stringify(e)}`);
    process.exit(1);
  }
}

main();
```

## Generating the RSS Feed at build-time

Now that we have a working script, we want to run the function above after every build. To do so, let's add the following scripts to the `package.json` file:

```
"postbuild": "npm run rss",
"rss": "npx tsx './rss-feed.ts'",
```

1. The `rss` command used `tsx` to execute the TS file and generate the RSS files.
2. The `postbuild` hook will automatically call the `rss` command after every build.

That's it! We can now generate an RSS Feed for various formats (`json`, `xml` and `atom XML`) for our Next.js website!


How to generate an RSS feed with Next.js


The Firebase Admin package is a way to use Firebase on NodeJS, thus allowing us to write backend code with the various Firebase packages such as Auth, Firestore, Storage, and so on.

To use Firebase with a Next.js API function, we have to initialize the Firebase Admin. Let's see how it's done:

### Firebase configuration

First, we have to store and retrieve the Firebase configuration for our project.

To do so, we can use the Next.js environment variables by creating a `.env` file in the root folder, and making sure to fill the values below correctly:

```bash filename=.env
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=
```

Once it's done, we can create a function that accepts the following interface and returns the Firebase admin app:

```tsx
interface FirebaseAdminAppParams {
  projectId: string;
  clientEmail: string;
  storageBucket: string;
  privateKey: string;
}
```

The snippet below is everything you need to create an admin app using Firebase:

```tsx filename=create-firebase-admin-app.ts
import admin from 'firebase-admin';

function formatFirebasePrivateKey(key: string) {
  return key.replace(/\\n/g, '\n');
}

export function createFirebaseAdminApp(params: FirebaseAdminAppParams) {
  const privateKey = formatFirebasePrivateKey(params.privateKey);
  
  // if already created, return the same instance
  if (admin.apps.length > 0) {
    return admin.app();
  }

  // create certificate
  const cert = admin.credential.cert({
    projectId: params.projectId,
    clientEmail: params.clientEmail,
    privateKey,
  });

  // initialize admin app
  return admin.initializeApp({
    credential: cert,
    projectId: params.projectId,
    storageBucket: params.storageBucket,
  });
}
```

Let's assume you created a Next.js API function and want to create a Firebase admin app to be able to use Firestore, you can do the following:

```tsx filename=/api/teams.tsx
import { createFirebaseAdminApp } from './initialize-firebase-admin-app';
import { getFirestore } from 'firebase-admin/firestore';

async function initializeAdmin() {
  const params = {
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    privateKey: process.env.FIREBASE_PRIVATE_KEY
  };

  return createFirebaseAdminApp(params);
}

export default function getTeams(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  // initialize admin
  await initializeAdmin();

  // now we can use the Firebase packages!
  const firestore = getFirestore();

  const { docs, size } = await firestore.collection('teams').get();
  const teams = docs.map(doc => doc.data())

  return res.send(teams);
}
```

Initialize the Firebase Admin with Next.js


Depending on whether we are redirecting from an API endpoint or from a server-side rendering function, there are different ways to redirect users to another page using Next.js.

## Redirecting from an API function in Next.js

If you are handling an API function, you can use the `redirect` method on the `NextApiResponse` object to redirect the user to another page, as seen below:

```tsx filename=/api/handler.tsx
function myApiHandler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  if (notFound()) {
    return res.redirect(HttpStatusCode.NotFound, `/404`);
  }
}

export default myApiHandler;
```

## Redirecting users before rendering the page in Next.js

Another common way to redirect users to another page is using the `getServerSideProps` function when rendering the page server-side with Next.js.

This function is particularly useful, for example, when checking the authentication state of the user before rendering the correct page.

To do so, we have to return the object containing `redirect` as a property from the `gerServerSideProps` function with the following interface:

```tsx
{
    redirect: {
      permanent: boolean;
      destination: string;
  }
}
```

Let's see a complete example:

```tsx filename=/pages/ProtectedPage.tsx
export default function ProtectedPage() {
  return <></>;
}

export function getServerSideProps(ctx: GetServerSidePropsContext) {
  if (isLoggedIn()) {
    const props = getProps();

    return {
      props,
    }
  }

  const destination = `/auth/sign-in?returnUrl=${returnUrl}`;

  return {
    redirect: {
      permanent: false,
      destination,
    },
  };
}
```

And that's it! You now know everything you need to be able to redirect users to other pages with Next.js!

Snippets

A collection of snippets about React, Typescript, Firebase and Next.js