Prismic People

Business of Web Development

Foundations

Next.js SEO Tutorial: Try a Quick Project with Key Optimizations

Written by Paulina Gavilán in

Optimization on March 18, 2022

Next.js SEO

Taking SEO (Search Engine Optimization) into account when building your Next.js site is an essential part of your end user’s business strategy. It helps improve the quantity and quality of visitors and makes the site rank better in Google’s recommendations to create trust and credibility.

Next.js alone is a powerful front-end technology choice. It creates server-side rendered applications that load faster as the browser takes care of one file per page at a time. This improves user experience and thus SEO. You may have read Next.js’ guide to understanding SEO. Now it’s time to take what you’ve learned and apply it with a few quick ways you can boost any site’s ranking power.

Below we will review a few considerations that help improve SEO: image optimization, accessibility, user experience, and schemas. Most of these will be built into the project we create later. Then we’ll dive into a brief tutorial at the end of this post to learn how to add schemas to a project and see Next.js’ SEO benefits in action. Let’s get started!

Image optimization

Optimized images help speed up page loading, which can help improve ranking in search engines.

It's important to remember that image size is not the same as file size. The size of an image refers to its dimensions, for example 1020px by 700px. The file size, on the other hand, is the amount of space an image consumes on a server, for example, 500kb.

If your site uses large, high-resolution images, it is likely that these will slow your page load times because the file sizes are larger. This type of high-quality format is indicated for printing, but on a website, it's always important to lower file sizes.

If you’re planning to deploy to Vercel, you’ll have the option to implement the Next image component to help with image optimization. Fortunately, if you’re using Prismic (as you’ll see in the tutorial below) you’ll benefit from image optimization without any extra work. It automatically optimizes all your images with Imgix. Read more about this native function.

Accessibility

Web accessibility is the art of ensuring that a website or service can be visited and used adequately by the greatest possible number of people, regardless of their personal limitations.

It’s true that accessibility is good for SEO. Good SEO focuses on the user, on the interest generated by the content, and on how well it meets their expectations. By making accessibility a priority, you’ll be choosing the best options for your users, and Google has made this practice an important part of their official policies.

Importantly, though, accessibility shouldn’t ever just be about SEO — at the heart of these practices is our responsibility as developers to make the web an inclusive place for everyone. You’ll see some accessibility practices in action in the tutorial below, but you can also get delve deeper on this topic with our starter guide to accessibility in Next.js.

User experience

Focusing on a good user experience helps you examine your goals, presentation, and audience. Users value efficiency and having their needs easily met.

It will also influence the way Google ranks your sites because they evaluate factors like responsiveness, accessibility, speed, and visual stability. Google initiated this focus on user experience to position the highest-quality websites and content first in search results.

You can use Chrome’s Core Web Vitals tool to measure your site's performance.

The project you’ll create in this tutorial covers a few elements of user experience:

Responsiveness: The site’s components are adaptable to mobile and desktop views.
Hierarchy: The sitemap of the website is organized for the user to navigate easily using a single top-level navbar to navigate through the pages.
Design: The CSS and styling of the site are consistent throughout the site’s components.
Accessibility: You’ll see the use of semantic HTML and alt tags on images.

We encourage you to continue using these practices as your project grows so that your users or clients always have happy visitors, customers, or readers.

Schemas

Schemas or structured data help search engines understand the type of content on your website so they can index it correctly and, in some cases, give your result special formatting to create rich results. This can be a crucial element in the success of your site since organic traffic is one of the best ways for your users to find your website.

For example, imagine you write a cooking blog and add structured data to each recipe. When a user does a search about recipes, your page’s schema information will help search engines create specially formatted results, like the cards below.

A screenshot of the recipe cards that Google creates from schema data. The cards provide previews of recipes in search results with an image, the recipe title, recipe ratings, and a short list of some recipe ingredients.

This is beneficial for SEO because rich results often appear at the top of search engine results pages, thus outranking others more easily.

In the following tutorial, you’ll be able to try using schemas by working through a quick Prismic project.

Get started with schemas

Now let’s run an example project to quickly have a working Prismic + Next.js project where we can give schemas a try. You’ll use our local developer tool, Slice Machine, to implement the project and learn how to add schemas to boost the rich content of the site.

Slice Machine is a tool connected to your Prismic repository to help you build page sections, define their data models, edit properties, deploy them, and deliver a visual interface that allows content creators to easily build pages.

The first step is to open your command line and run the following theme command in your terminal:

npx degit https://github.com/prismicio-community/nextjs-starter-prismic-multi-page nextjs-starter-prismic-multi-page
cd nextjs-starter-prismic-multi-page
npx @slicemachine/init

This command will create a new Next.js project and install all the necessary dependencies, it will prompt you to name a brand new repository in Prismic (to store your data and provide an editing interface later), and then ask you to log in or sign up to Prismic.

Now, navigate to the directory you named during the setup process for your project and run it to have an awesome developer experience while creating your first schema:

npm run dev

This command will open a server with your new website in a development environmentstart and the Slice Machine tool on LocalHost:9999. You’ll be greeted with a short onboarding tutorial.

Here you’ll learn how to model Custom Types, where you’ll define and configure Fields and reusable components, which we call Slices, for your document’s content.

Slices are a great choice for your FAQ schema because they enable your content team or client to use them modularly, only on pages where they work with the content. The Slice we build will also enable the content team to customize the schema for every page they want to add it to in Prismic’s editor, without needing to ask you to create or add JSON to each new page or blog post they create.

Create a FAQ Schema Slice

Let’s first create the Slice to handle a list of FAQs that we will later transform into a schema in the project code.

1. In Slice Machine, first, open the "Slices" tab. Then create a new Slice called FaqSlice by pressing the circular purple "+" button in the top right corner.

A screenshot of the Slice Machine interface, highlighting which buttons to press from step one.

2. In your new Slice, delete the two default fields in the “Non-Repeatable zone.” Then add two repeatable Rich Text fields by pressing the “Add a new Field” button beside the “Repeatable zone” header and following the prompts. Name your new fields question and answer.

A screenshot of the Slice Machine interface for editing the fields of individual Slices.

3. Click on the “Save model to filesystem” button at the top right. This will make the Slice available to use as a component in your Custom Types. Custom Types are like templates for your pages.

4. Now, select the “Custom Type” tab on the left. On the new page, select the Page Custom Type. Click on the “SEO Metadata” tab just below the heading that says “Custom Types / Page” at the top of the page. Scroll down, and you’ll see an empty “SliceZone.” Click on “Add a new Slice,” and select the FaqSlice. Then be sure to scroll down and click “Save” to close the modal.

A screenshot of the Slice Machine interface for selecting which Slices you want to add to a Custom Type.

5. Once your FAQ Slice is added, press the “Save to filesystem” button at the top right, and then the “Push to Prismic” button that appears. These actions will update your Prismic repository with the Page Custom Type and its new FaqSlice Slice.

6. Head over to the Custom Type tab again and for both of the other types available, Home Page and Menu, open each one individually and press the “Push to Prismic” button again. You’ll use them later when creating unique pages for the site.

Update the Slice code

Next, open your new project code in your favorite editor (for example, Visual Studio Code) to edit your new Slice.

1. You’ll find the FAQ Slice inside the slices folder at the root of your project. Here’s an example of the project’s folder structure:

└── slices
    └── FaqSlice
       ├── index.js // Your Slice component
       └── model.json // The JSON model of the Slice

Open the index.js of the Slice.

2. Replace the code of the FaqSlice with the following (you can read through the code comments to see how the component is being built):

// slices/FaqSlice/index.js

import React from 'react'

/**
* The following React component renders a <section> tag 
* with a <script> containing the JSON schema
* of the FAQ Slice.
*/
const FaqSlice = ({ slice }) => {
  // Declare an empty array
  const schemaData = []

  // Loop through the Slice array
  slice.items.forEach((slice) => {
    const questions = []
		// Find the question and answer fields
    questions.push({
      '@type': 'Question',
      name: slice.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: slice.answer,
      },
    })
		// Add the fields to the JSON schema
    schemaData.push({
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: questions,
    })
  })
  //return a fully formed FAQ schema
  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
      />
    </section>
  )
}

export default FaqSlice

This component is added to the layout of each new page with the FAQ schema when content editors use your Slice. You can learn more about this structured data type and see examples of the JSON in Google’s official docs.

Publish documents

Now it’s time to see your site and FaqSlice come to life. Go to your Prismic repository in your Prismic dashboard. And quickly create a few pages to test your site out on. We call pages “documents” in our editor. To create a page:

1. Press the green pencil button in the top, right corner of the window.

A screenshot of the editor interface in a Prismic repository.

2. Select “Home Page” from the modal that appears.

3. Enter “home” in the UID field for this page.

4. Create a “Home Page” document by adding some Slices. Add Slices by selecting them from the thumbnail carousel below the UID. Fill each Slice with a bit of filler text and data.

5. When your new document is ready, press “Save” in the top right corner, and then the same button again when it says, “Publish.” Follow the prompts to publish your page.

A screenshot of the editor interface where content teams can preview Slice screenshots and select them to use modularly on a page.

6. To create a document from your “Page” Custom Type, repeat steps two through six, this time selecting “Page” in step two and setting the UID to “awesome-seo” in step three.

7. Then, while still editing your new page, head over to the SEO Metadata tab to add a FAQ Slice. You can fill in the metadata at the top of this tab with filler content.

8. Below, click the FaqSlice to add it to the page. Then add some questions and answers about the content on that page.

9. Save and publish your document.

10. Now, create a new “Menu” type document by repeating steps two through six, and you’ll have a navigation bar for your site’s pages. To add links to the new navigation bar you’ve created, fill in the “Link” fields and select “Link to a Document” from the prompts in the drawer that appears on the right. Save and publish.

See the results

Now you’re ready to run your project locally and see it live. Run the project:

npm run dev

Head to http://localhost:3000/awesome-seo (you may need to replace “3000” with the port your Next.js app is running on). Open your web inspector and expand <header> , then <section> , and then <script> to see your schema's JSON.

Now your repository has an FAQ schema Slice ready to be used in your documents, so you can start adding more dynamic pages that will use best practices behind the scenes!

The FAQ schemas will be visible to search engines when you deploy your site. Then, using your live website URL, you’ll also be able to test the schemas here. And you’ll be able to preview your rich results on Google here.

To see all of the other SEO benefits that were built into your project by simply using Next.js, you can test our deployed version of this example with your Lighthouse tool in Chrome, or by testing the URL in Google’s PageSpeed Insights tool. To quickly recap all we learned today:

You’ll get out-of-the-box SEO benefits simply by building with Next.js.
Image optimization is a key element of ensuring that your site will have maximum performance, and it’s a built-in feature with your Prismic project.
Accessibility and user experience practices are important because they help Google find and rank quality content that users will enjoy and benefit from.
Schemas help search engines understand your content and allow them to create rich results that can help you gain more organic traffic.

Bonus ⭐

There are numerous other schemas that you can choose from. Take a look at these other two examples:

// Event
{
   "@context":"https://schema.org",
   "@type":"Event",
   "name":"The Adventures of Kira and Morrison",
   "startDate":"2025-07-21T19:00-05:00",
   "endDate":"2025-07-21T23:00-05:00",
   "location":{
      "@type":"Place",
      "name":"Snickerpark Stadium",
      "address":{
         "@type":"PostalAddress",
         "streetAddress":"100 West Snickerpark Dr",
         "addressLocality":"Snickertown",
         "postalCode":"19019"
      }
   }
}

The schema above creates a rich result for events that looks like the picture below:

A screenshot of the rich results that Google creates with data from event schemas, showing the date, an image, and other event details.

There are even schemas for things like job postings. You can see the JSON for a job schema below.

// Job posting
{
   "@context":"https://schema.org/",
   "@type":"JobPosting",
   "title":"Software Engineer",
   "description":"<p>Google aspires to be an organization that reflects the globally diverse audience that our products and technology serve. We believe that in addition to hiring the best talent, a diversity of perspectives, ideas and cultures leads to the creation of better products and services.</p>",
   "datePosted":"2017-01-18",
   "jobLocation":{
      "@type":"Place",
      "address":{
         "@type":"PostalAddress",
         "streetAddress":"1600 Amphitheatre Pkwy",
         "postalCode":"94043"
      }
   },
   "baseSalary":{
      "@type":"MonetaryAmount",
      "currency":"USD",
      "value":{
         "@type":"QuantitativeValue",
         "value":40.00,
         "unitText":"HOUR"
      }
   }
}

A job posting schema creates a rich result like this:

A preview of the rich results that Google creates with job posting schema data, showing the position title and other details.

You can learn more about how Google handles schemas and see a full list of rich results here!