SEO is important for any website, but it’s even more critical for websites built with Next.js. If you’re not familiar with Next.js, it’s a React-based framework that helps developers build performant and SEO-friendly websites. This can come in handy when it comes to load speed and sitemaps.

One of the best ways to optimize your Next.js website for SEO is to generate a sitemap. A sitemap is an XML file that contains all the URLs of a website. Search engine crawlers use it to discover which pages and content exist on your website.

NextJS Setup

First, we’re going to assume that you already have a Next.js project setup. If not you can just use the default npx create-next-app@latest.

We will start of by creating some content to put in the nextjs sitemap. You can start off by creating random pages or if you want to go the extra mile you can create a blog in the pages/blog. For this measure you can just create static content on your blogs.

Let’s import our packages:

npm install next-sitemap

In Next.js, pages are based on the files contained in the “pages” directory. Each page is associated with a route based on its file name. Before a sitemap can be generated, the pages that reside on your website need to be known. The “next-sitemap” package takes care of this by dynamically generating the sitemap on each request using server-side rendering.

Setting up next-sitemap.config

To set up the next-sitemap.config file, you need to specify the options for generating your sitemap in a JSON format. This file is used by the next-sitemap package to configure how your sitemap will be generated.

The basic options you can specify in this file include the base URL of your site, the pages that should be included in the sitemap, and any additional properties you want to include in the sitemap such as the frequency of change or the priority of each page. You can find more information on the available options and how to use them in the official documentation for the next-sitemap package.

For starters here is a basic config file:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://www.example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
  exclude: ['/server-sitemap.xml'],
  robotsTxtOptions: {
    additionalSitemaps: ['https://www.example.com/server-sitemap.xml'],
  },
};

However, this will omst likely just get you your current pages in your nextjs app. For example, let’s say we had a blog or a list of categories, we wouldn’t want to add them one by one, instead we can use the api folder and request our data.

Here is an example below.

import { GET_POSTS } from '@/graphql/queries/query.tsx';
import { initializeApollo } from '@/utils/ApolloClient.tsx';

export default async function handler(req, res) {
  const client = initializeApollo();

  const { data } = await client.query({
    query: GET_POSTS,
  });
  const posts = data.posts.edges;
  const urls = posts.map((post) => ({
    loc: `https://example.com/${post.node.categories.nodes[0].slug}/${post.node.slug}`,
    lastmod: new Date(post.node.date).toISOString().split('T')[0],
  }));
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/xml');

  // Instructing the Vercel edge to cache the file
  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">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2023-03-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
    ${urls
      .map((url) => {
        return `
        <url>
          <loc>${url.loc}</loc>
          <lastmod>${url.lastmod}</lastmod>
          <changefreq>daily</changefreq>
          <priority>0.7</priority>
        </url>
      `;
      })
      .join('')}
  </urlset>`;

  res.end(xml);
}

For this website I am using Apollo Client and graphql to fetch the data, since that is what this project is built with. However you should use whatever it is you’re using for your server and request the data. If your using rest simply make a fetch request and get your blogs. You can also utilize Prisma ORM and not use APIs altogether since it’s a very popular stack mixed with Nextjs.

Generate Build

Next you will need to generate build. It’s time to export your Next.js app as a set of static files. This is so that you can deploy your app. To do this, you will need to update your build script inside the “package.json” file to include “next export.” The updated build script should look like this:

Once you’ve made these updates, run the build command again in your project directory:

npm run build

And that’s it! Your Next.js app is now supercharged with a sitemap, which will help improve your SEO.

React Query is a powerful library that helps developers manage and fetch asynchronous data in React applications. With its intuitive API and seamless integration with React, React Query makes it easy for developers to fetch, cache, and update data in their applications, improving their user experience and performance. In this blog post, we will discuss why developers should consider using React Query in their projects.

React Query overview

A brief overview of React Query. It is a lightweight library for data fetching and caching in React applications. It provides a powerful, yet simple API for fetching, caching, and updating data in an efficient way. React Query is designed to provide an intuitive and declarative way of managing data in React applications. It is optimized for performance, so requests are made in an efficient and fast way, while still providing the flexibility needed to easily update data. React Query also provides a robust API for handling errors, pagination, and more. It is a great solution for managing complex data in React applications.

To start off using React Query, you will need to install the package using either npm or yarn. Then, we can use the React Query hooks to create queries, fetch data, and update the state. You can also use the React Query component to declaratively set up data fetching and caching. Finally, React Query provides a set of utilities that can assist you in managing your data, including caching, pagination, error handling, and more.

How to use React Query to fetch and cache data from an API.

For example, to use React Query to fetch data from an API, you can use the useQuery hook, like this:

import { useQuery } from "react-query";

const fetchUser = async () => {
  const res = await fetch("https://reqres.in/api/users/2");
  return res.json();
};

function App() {
  const { data, isLoading, error} = useQuery("user", fetchUser);

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

This code will create a query that will fetch data from the API and store the result in the query’s context. You can then use the data in your application, as well as the isLoading and error props to handle the loading state and errors.

The benefits of using React Query, such as automatic cache updates and support for pagination and server-side rendering.

When a new instance of useQuery(‘user’, fetchUser) is mounted, a hard loading state is shown and a network request is made to fetch the data. The hook then caches the data and marks itself as stale after the configured staleTime (which is 0 by default).

If a second instance of the same query appears, the data is immediately returned from the cache. A background refetch is triggered for both queries, and if the fetch is successful, both instances are updated with the new data. When the instances are unmounted, a cache timeout is set using cacheTime (defaults to 5 minutes) to delete and garbage collect the query, and if no more instances appear within that time, the query and its data are deleted and garbage collected.

Good set of Developer Tools

React Query Devtools is a powerful set of tools for developers to manage and debug their React Query applications. It provides a comprehensive overview of the current state of the application, as well as detailed information about the data being fetched and the queries being used. It can also be used to debug data fetching, track changes, and identify performance bottlenecks. React Query Devtools is a great tool for any React Query developer because it helps them to quickly identify and fix any issues with their data fetching.

As you can see on the bottom right corner the use of the data explorer helps make sure sure correct queries are being rand and what data is being retrieved.

Advanced features of React Query, such as query invalidation and custom hooks for fetching and updating data.

Query Invalidation

Query invalidation allows React Query to intelligently track the state of data within an application and selectively invalidate queries when the underlying data changes. This allows React Query to avoid unnecessary network requests and ensure that the application is always displaying the most up-to-date data.

Query invalidation is triggered when the underlying data changes. For example, if an application was tracking the stock price of a company, React Query would invalidate any queries related to that data whenever the stock price changed. This would ensure that the application would always be displaying the most up-to-date information about the stock.

Custom Hooks for Fetching and Updating Data

React Query integrates with React Hooks, allowing you to easily access query data in your components. This makes it easier to use in modern React applications. React Query provides powerful custom hooks that enable developers to quickly and easily fetch, update, and manage data within their application. These hooks make it easy to handle common data operations like caching, refetching, pagination, and more. Additionally, React Query provides APIs for customizing the behavior of these hooks, allowing developers to tailor the data fetching and updating experiences to their specific needs.

Common patterns and best practices for using React Query in a real-world application.

If you’re looking toi get started with react query in a real-world application, here are some common patterns and best practices to consider:

Use the in-memory cache option

React Query provides a built-in in-memory cache which can significantly reduce the number of requests you need to make to your backend. This can help reduce the load on your servers and improve the performance of your application.

function App() {
  const { data, isLoading, error} = useQuery("user", fetchUser, {
    cacheTime: 0,
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

Use the query caching feature

React Query offers a query caching feature that allows you to store the results of certain queries in the browser’s localStorage. This can be useful for storing the results of frequent queries so that they don’t need to be fetched from the server every time.

Use the refetchOnWindowFocus option:

The refetchOnWindowFocus option allows you to automatically refetch queries when the user’s focus returns to the page. This can be useful for keeping the data displayed on the page up to date without the user having to manually refresh the page.

function App() {
  const { data, isLoading, error} = useQuery("user", fetchUser, {
  refetchOnWindowFocus: false,
  });


  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

Use the polling feature:

React Query’s polling feature can be used to periodically refetch queries in order to keep the data displayed on the page up to date. This can be useful for displaying data that is frequently changing, such as live stock prices or the current weather.

function App() {
 const { data,isLoading, error } = useQuery("user", fetchUser, {
    refetchInterval: 1000,
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

Use the suspense mode:

function App() {
 const { data,isLoading, error } = useQuery("user", fetchUser, {
    suspense: true,
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
}

React Query’s suspense mode allows you to suspend the rendering of a component until the data that the component needs has been fetched. This can be useful for displaying information that is essential to the page but may take a few seconds to fetch. 6. Use the error handling feature: React Query provides an advanced error handling feature that allows you to easily handle errors that occur when fetching data from your backend. This can be useful for displaying meaningful error messages to the user and for logging errors that occur in production.

Overall Easy to use Library

React Query is a powerful and flexible library for managing asynchronous data in React applications. Its features, such as automatic cache updates and support for pagination and server-side rendering, make it easy to build performant and user-friendly applications. The React Query devtools provide valuable insights into the inner workings of your application, and following best practices for using React Query can help you avoid common pitfalls and take full advantage of its capabilities. Overall, React Query is a valuable tool for any React developer looking to improve the performance and usability of their applications.

If you’re a React developer, chances are you’ve heard of the useCallback hook. This hook is a powerful tool that allows you to optimize the performance of your React components by memoizing callbacks. In this post, we’ll take a deep dive into what useCallback is, how it works, and why you should consider using it in your React applications. We’ll also explore some real-world examples of how useCallback can be used to improve the performance of your components and provide some tips for using the hook effectively. Whether you’re a beginner or an experienced React developer, this post will provide you with the information you need to start using useCallback in your own projects.

What is useCallback and how does it work?

React useCallback is a hook that allows you to optimize the performance of your React components by memoizing callbacks. This means that the hook will return a memoized version of the callback function that only changes if one of its dependencies has changed.

Here’s an example of how useCallback can be used to optimize a component that renders a list of items:

import React, { useState, useCallback } from 'react';

const MyList = () => {
  const [items, setItems] = useState([]);

  const handleClick = useCallback(() => {
    setItems([...items, items.length]);
  }, [items]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>
          <button onClick={handleClick}>Add Item</button>
        </li>
      ))}
    </ul>
  );
};

In this example, the handleClick callback function is passed to the onClick event handler of a button that is rendered for each item in the list. When the user clicks the button, the handleClick function is called, which adds a new item to the list by updating the items state variable.

By wrapping the handleClick function in a call to useCallback, we ensure that the function will only be re-created if the items state variable changes. This means that if the items state remains the same, the same handleClick function will be used for every button, which can improve the performance of the component.

Why is useCallback important for optimizing React component performance?

useCallback is important for optimizing React component performance because it helps to avoid unnecessary re-renders of components. When a callback is defined using useCallback, React will memoize the callback and only re-create it when one of the dependencies has changed. This can help to improve the performance of a React application by avoiding unnecessary re-renders of components when props or state have not changed.

Tips for using useCallback effectively

Use useCallback to memoize functions that are passed as props to avoid unnecessary re-renders.

When passing a function as a prop to a child component, useCallback can be used to memoize the function. This will help to avoid unnecessary re-renders of the child component when the parent component re-renders, as the same function will be passed to the child each time. It is important to ensure that all of the necessary dependencies are passed to useCallback in order for it to be properly memoized.

For example, if a parent component had a state variable called “selectedItem” and a child component which needed to be passed an event handler to handle the selection of an item, useCallback could be used to memoize the event handler. The event handler should be passed to useCallback along with the “selectedItem” state variable as a dependency. This would ensure that the memoized event handler is only re-created when the “selectedItem” state variable changes.

const ParentComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleSelect = useCallback((item) => {
    setSelectedItem(item);
  }, [selectedItem])

  return (
    <ChildComponent onSelect={handleSelect} />
  )
}

const ChildComponent = ({onSelect}) => {
  return (
    <button onClick={() => onSelect('foo')}>Select Foo</button>
  )
}

Make sure to pass all of the necessary dependencies to useCallback to ensure that the memoized function is only re-created when needed.

When passing a function to useCallback to be memoized, it is important to ensure that all of the necessary dependencies are included. If dependencies are omitted, then the memoized function will not be re-created when the dependencies change and the performance of the application may suffer. It is also important to make sure that any dependencies that are necessary for the function are not passed as arguments to the function itself, as they will not be tracked by useCallback.

const ParentComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [someOtherValue, setSomeOtherValue] = useState(null);

  const handleSelect = useCallback((item) => {
    setSelectedItem(item);
  }, [selectedItem, someOtherValue])

  return (
    <ChildComponent onSelect={handleSelect} />
  )
}

const ChildComponent = ({onSelect}) => {
  return (
    <button onClick={() => onSelect('foo')}>Select Foo</button>
  )
}

Make sure to use useCallback for functions that need to be passed to a child component, such as event handlers.

Using useCallback to create functions that can be shared across multiple components can help to improve the performance of a React application. By creating a single function using useCallback and then passing it to each component that needs it, React will be able to memoize the function and only re-create it when necessary. This can help to reduce the amount of unnecessary re-renders of components.

const handleSelect = useCallback((item) => {
  setSelectedItem(item);
}, [selectedItem])

const ParentComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <ChildComponent onSelect={handleSelect} />
  )
}

const OtherComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <ChildComponent onSelect={handleSelect} />
  )
}

const ChildComponent = ({onSelect}) => {
  return (
    <button onClick={() => onSelect('foo')}>Select Foo</button>
  )
}

When possible, use useCallback to create functions that can be shared across multiple components.

When possible, use useCallback to create functions that can be shared across multiple components. This can help to reduce the amount of code that needs to be written and can help to improve the performance of a React application. By creating a single shared function with useCallback and passing it as a prop to each component, unnecessary re-renders can be avoided and the application can respond more quickly.

// Parent component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

// Child component
const ChildComponent = ({ onClick }) => {
  return (
    <button onClick={onClick}>
      Click me
    </button>
  );
}

If a function does not depend on any props or state, then useCallback is not necessary.

If a function does not depend on any props or state, then useCallback is not necessary. In this case, the function can be defined directly within the component and used as normal. This can be beneficial in situations where the function is only used within the component and does not need to be passed as a prop.

Troubleshooting common issues with useCallback

Not passing all necessary dependencies to useCallback. If all necessary dependencies are not passed to useCallback, then the memoized function may be re-created unnecessarily.

// Parent component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count, name]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

The issue here is that the necessary dependency, name, is not being passed to useCallback. As a result, the memoized function may be re-created unnecessarily if the name state changes.

Other issues include not using useCallback when passing functions as props. If functions are passed as props without using useCallback, then unnecessary re-renders may occur.

Lastly not using useCallback when creating functions that can be shared across multiple components. If a function can be shared across multiple components, then useCallback should be used to create it. Not doing so may lead to unnecessary re-renders.

How useCallback compares to other React performance optimization techniques

The useCallback hook is just one of many performance optimization techniques available in React. Other techniques such as memoization, shouldComponentUpdate, and React.PureComponent can also be used to optimize the performance of React applications. However, useCallback can be particularly useful when passing functions as props, as it can help to avoid unnecessary re-renders of components when the props or state have not changed.