Understanding SEO and Web Vitals for your NextJS site and how to improve them?

• next-notion-portfolio

  4 17 6.2 TypeScript

  Portfolio cum Blog built with NextJS using Notion as a CMS

• next-seo

  31 7,300 6.8 JavaScript

  Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Meta tags exist in the head element of the page providing important information about the page that can used by search engines and social media sites. There are a variety of meta tags that represent different types of information for different search engines. A popular subset of standardized meta tags are described in the open graph protocol. Managing these tags for every page and generating them dynamically for blog pages has it’s own overhead. Thus for that reason, I have used the Next-SEO plugin. The Next-SEO plugin provides DefaultSEO component that contains tags that will be defined for all routes by default which subsequently can be overwritten at a page level by then using the NextSEO component. Below is the default SEO config used by me.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• lighthouse-ci

  18 6,267 7.2 JavaScript

  Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

  

You can also set up lighthouse-ci as a github action to evaluate the web vitals on push or in pull requests.

• react-notion-x

  17 4,526 4.9 TypeScript

  Fast and accurate React renderer for Notion. TS batteries included. ⚡️

  

In my previous article in this series, I had created my own react components to work with the Notion API due to the lack of a recognized renderer that works with Official Notion API. I came across the react-notion-X library but that did not use the Official Notion API then so I chose to create my own renderer. But soon after I published that article, Travis Fischer (creator of react-notion-x and a couple of really handy tools) added support for the official Notion API with notion-compat (still a WIP) which allows you to use react-notion-x’s powerful react renderer with the official API. So I replaced my renderer components with the react-notion-x renderer which gave me a huge performance boost.

• nextjs-notion-starter-kit

  11 5,796 3.5 TypeScript

  Deploy your own Notion-powered website in minutes with Next.js and Vercel.

If you want more control over your website via React, then we recommend checking out the accompanying Next.js starter kit, which is free and uses react-notion-x under the hood.

• superplate

  32 2,755 6.9 TypeScript

  A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate creates projects for React.js, Next.js, and refine. https://pankod.github.io/superplate/

  

This project was build on a template generated with superplate Currently hosted on vercel at www.alanjohn.dev

• web-vitals

  140 7,113 7.7 JavaScript

  Essential metrics for a healthy site.

  

💡 I have just summarised the core web vitals based on content found at https://web.dev/vitals/. My primary goal is to highlight how I improved my core web vitals and this is a prerequisite to that. If you want to learn more about web vitals in details, there is comprehensive content found at https://web.dev which i would strongly recommend. You can also refer NextJS learn.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• PrismJS

  59 12,011 0.0 JavaScript

  Lightweight, robust, elegant syntax highlighting.

  

💡 I had later removed highlight.js altogether for prism.js in this PR.

• prettier

  439 48,241 9.8 JavaScript

  Prettier is an opinionated code formatter.

  

• opengraph

  164 224 0.0 Python

  A python module to parse the Open Graph Protocol

Meta tags exist in the head element of the page providing important information about the page that can used by search engines and social media sites. There are a variety of meta tags that represent different types of information for different search engines. A popular subset of standardized meta tags are described in the open graph protocol. Managing these tags for every page and generating them dynamically for blog pages has it’s own overhead. Thus for that reason, I have used the Next-SEO plugin. The Next-SEO plugin provides DefaultSEO component that contains tags that will be defined for all routes by default which subsequently can be overwritten at a page level by then using the NextSEO component. Below is the default SEO config used by me.

• PyLD

  28 577 5.2 Python

  JSON-LD processor written in Python

  

We can help google search engine understand the content of our site even more by adding structured data with the help of JSON-LD. Google can use the structured data to enable special search features which in turn boost your page rank. You can read more about this here: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data

• notion-sdk-js

  22 4,575 6.6 TypeScript

  Official Notion JavaScript Client

  

Go To Documentation

Suggest a related project