DEV Community: mhmd-elsaid

Create dynamic sitemap in Next.js app

mhmd-elsaid — Mon, 07 Nov 2022 20:22:27 +0000

SEO, or Search Engine Optimization, means setting up your website and content to show up through online search results. While many marketing tactics rely on you reaching out to your audience, SEO gives you the power to reach people when they are actively searching out information related to your products and services.

Steps to create Dynamic Sitemap File

Firstly we have to install next-sitemap.
Create next-sitemep.js file on the next.config file level.
Define your base url by adding this code in next-sitemap.config.js file to read website urls .

const siteUrl = "https://your-host"

module.exports = {
    siteUrl
}

Now build the app and will find that sitemap.xml file will be automatically created with your static routes.

To auto generate robots.txt file we just need to add generateRobotsTxt: true to the exports object in
next-sitemap.config.js file , so next-sitemap.config.js file after updating will be like following :

const siteUrl = "https:your-host"

module.exports = {
    siteUrl,
    generateRobotsTxt: true
}

To make sure it will regenerated each time we build the app add the following two lines to .gitignore file

/public/sitemap.xml
/public/robots.xml

What if we need to exclude some pages from being added to sitemap ?
we can do it by updating next-sitemap.config.js file and adding exclude array to the exports object.

const siteUrl = "https:you-host"

module.exports = {
    siteUrl,
    generateRobotsTxt: true
    exclude: ["/<page-url>"]
}

And to disallow those pages in robots.txt file, we can do it using robotsTxtOptions object .

So next-sitemap.config.js file will be like following after adding pages we need to disallow .

const siteUrl = "https:yuor-host";

module.exports = {
  siteUrl,
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      { userAgent: "*", disallow: "/<page-url>" },
      { userAgent: "*", allow: "/" },
    ],
  },
  exclude: ["/<page-url>"],
};

In the above steps we had created a dynamic sitemap for the static pages we have ,[ex: example.com , example.com/about , … etc] .

This is great but what about the dynamic rendering pages ? [like : example.com/posts/[post_id] , … etc ] .

The problem is that we don’t have params in those urls.

So what should we do to overcome this problem ?

Firstly we have to get all dynamic pages urls .
Then we can create another sitemap for those pages .

let’s do it 🥷

create a folder called server-sitemap.xml in the Pages folder & create an index.js file inside.

In the index.js file we will use getServerSideProps to get urls for dynamic pages .

import Axios from "axios";

export async function getServerSideProps(context) {
  const response = await Axios.get(
    `base_url/<data>`,
  );
  const data = await response?.data;
  return {props:{data}};
}

export default function Site() {}

then we will create an array of objects fields which contains {loc : <page url> ,lastmod: <time now>}.

import Axios from "axios";

export async function getServerSideProps(context) {
  const response = await Axios.get(
    `base_url/<data>`,
  );
  const data = await response?.data;
  const fields = data?.map((item) => ({
    loc: `https://your-host/${item?.url}`,
    lastmod: new Date().toISOString(),
  }));
  return {props:{data}};
}

export default function Site() {}

Then we will import getServerSideSitemap function from next-sitemap and use it to generate sitemap links and return the result from getServerSideProps

import Axios from "axios";
import { getServerSideSitemap } from "next-sitemap";

export async function getServerSideProps(context) {
  const response = await Axios.get(
    `base_url/<data>`,
  );
  const data = await response?.data;
  const fields = data?.map((item) => ({
    loc: `https://your-host/${item?.url}`,
    lastmod: new Date().toISOString(),
  }));
  return getServerSideSitemap(context, fields);
}

export default function Site() {}

Great , now we had created the server dynamic sitemap & if we go to the url host/server-sitemap.xml we will find that our sitemap includes fetched urls as expected .

Last thing to do here is to inform google crawler that it’s not only one sitemap ,but two .
And this will be done by adding additionalSitemaps key to robotsTxtOptions object in next-sitemap.config.js file and add our two sitemaps [static one that we have created before for static routes & server side one that we created for URLs with params].

const siteUrl = "https://your-host";

module.exports = {
  siteUrl,
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      { userAgent: "*", disallow: "/page-url" },
      { userAgent: "*", allow: "/" },
    ],
    additionalSitemaps: [
      `${siteUrl}/sitemap.xml`,
      `${siteUrl}/server-sitemap.xml`,
    ],
  },
  exclude: ["/page-url"],
};

That’s all , now we had created a dynamic sitemap for static pages & dynamic sitemap for dynamic rendering pages .

css-in-js

mhmd-elsaid — Sun, 21 Feb 2021 17:33:30 +0000

Introduction

CSS-in-JS libraries have been gaining traction since component-based JavaScript frameworks appeared in front-end development.

Why we need css-in-js libraries ?

Due to the cascading nature of CSS (Cascading Style Sheets), stylesheets can load in any order and override each other in any combination.
Managing dependencies is another problem when it comes to styling SPAs (single-page application).

So

_ A well-designed CSS-in-JS library can solve all of this problems.
_ CSS-in-JS is, in fact, a JavaScript library that bundles each JavaScript component with all its belonging CSS rules and dependencies.
_ As a result, components can run independently, without relying on any external CSS file.

CSS-in-JS Libraries :

there are two types of css-in-js libraries :

Framework-Specific libraries :

libraries only work with a specific JavaScript framework.
ex :
Radium: has been created for React apps.
Styled JSX: only supports components written in JSX

Framework-specific CSS-in-JS libraries:
use the same syntax as the framework they support.

For instance:
Styled JSX uses template literals within the JSX syntax to add CSS styles to components.

const Button = (props) => (
  <button className={ 'large' in props && 'large' }>
     { props.children }
     <style jsx>{`
        button {
          padding: 20px;
          background: #eee;
          color: #999
        }
        .large {
          padding: 50px
        }
     `}</style>
  </button>
)

/* Creates a regular button */
<Button>Hi</Button>

/* Creates a large button */
<Button large>Big</Button>

Framework-agnostic CSS-in-JS libraries:
can be used with any component-based frameworks .

for example : JSS && Emotion

example using jss

/* Registers a Web Component with red background */
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    red: {
        backgroundColor: 'red'
    }
});

class App extends HTMLElement {
    attachedCallback() {
        this.innerHTML = `
            <div class="${css(styles.red)}">
                This is red.
            </div>
        `;
    }
}

document.registerElement('my-app', App);

Unique Selectors vs. Inline Styles

css-in-js libraries use one of two techniques to handle scoping :

unique selector: most CSS-in-JS libraries such as JSS, Emotion, and Styled Components automatically generate a unique selector for each component. In this technique library generates a unique selector such as a unique class that won’t cause any CSS specificity problems.

but this makes the source code doesn’t look very pretty.

inline styles: some CSS-in-JS libraries such as Radium add inline CSS on the fly to the HTML instead of generating unique classes.

adv of using inline style library:

lead to more readable HTML code.
better performance.
source order independence.

Advantages of CSS-in-JS

Local Scoping:

__ By default, CSS doesn’t allow local scoping. Each style rule has a global scope. So as a result styles can override each other in surprising ways.
__ CSS-in-JS libraries solve this by automating scoping, which leads to a high level of predictability.
Encapsulation:

__ Encapsulation facilitates maintenance and eliminates errors, as you can modify all component-related code in the same place, without having to worry about unexpectedly changing other parts of the application.
Portability:

__ As components include all the source code, styles, and logic, you can securely move them around.
Re-usability:

__ Components are reusable, so you only have to write them once, then you can run them everywhere.
Dynamic Functionality:

__ As CSS-in-JS is essentially JavaScript code, you can apply complex logic to your style rules, such as loops, conditionals, variables, and more.

Disadvantages of CSS-in-JS

Although CSS-in-JS libraries allow you to build component-based applications in a logical and efficient manner, they also have some characteristics that might make you wary of them.

Extra Layer of Complexity:

__ using css-in-js library adds an extra layer to your front-end stack, which can sometimes be unnecessary.
Code Readability:

__ Automatically generated selectors significantly worsen code readability.

DEV Community: mhmd-elsaid

Create dynamic sitemap in Next.js app

Steps to create Dynamic Sitemap File

css-in-js

Introduction

Why we need css-in-js libraries ?

So

CSS-in-JS Libraries :

Framework-Specific libraries :

Unique Selectors vs. Inline Styles

Advantages of CSS-in-JS

Local Scoping:

Encapsulation:

Portability:

Re-usability:

Dynamic Functionality:

Disadvantages of CSS-in-JS

Extra Layer of Complexity:

Code Readability:

References: