【Next.js×SSR】ReactでSEO最強のブログを作る完全ガイド

"I made a blog using React, but it's not good for search."
"I've heard of SSR (Server Side Rendering), but it seems difficult."
Aren't there many people who feel this way?

actually,Using Next.js, you can easily build an SEO-friendly blog using React.can.
In this article,How to speed up page display, optimize URL structure, and implement SSR for SEOWe will explain it carefully so that everyone can understand.

The completed code is also provided.Even beginners can start a full-fledged blog todayIt has become.

table of contents

Why create an SSR-enabled blog?
1. Why do you need SSR for your blog?
What is the difference between Next.js and React?
1. Benefits of using Next.js
Create a page and article structure
1. Folder structure and route settings for post pages
Implementing SSR with getServerSideProps
1. Retrieving and displaying data on the server side
Key points for SEO settings
1. Head tag and meta information settings
Completed code list
1. pages/index.js
2. pages/posts/[id].js
summary

Why create an SSR-enabled blog?

Why do you need SSR for your blog?

Bottom line: SSR is better for search engines and makes pages load faster.

In a normal React app, the content is not visible until the JavaScript is executed when the app is first displayed.
This is bad for search enginesReasons for poor SEO rankingIt will be.

However, if you use SSR (Server Side Rendering),Generate the page on the server before displaying itwill be done.

The benefits are:

Google and YahooAccurate information is provided
Faster displayDropout rates decrease
Share on social media tooThe correct information is easily displayed

The Ministry of Economy, Trade and Industry has also announced that "Web search optimization is essential for disseminating information and increasing awareness."
(https://www.meti.go.jp/policy/mono_info_service/joho/marketing.html).

What is the difference between Next.js and React?

Benefits of using Next.js

Conclusion: Next.js is an evolution of React and comes with SSR and routing as standard.

React is a library for creating views.
Next.js is based on ReactThe following useful features are included from the start:.

SSR (Server Side Rendering)
File-Based Routing
Meta information (SEO tags) settings for each page
Use with static generation (SSG)
Ability to create API routes

The installation can be done as follows:

1	`npx create-next-app@latest my-blog` `cd` `my-blog npm run dev`

Create a page and article structure

Folder structure and route settings for post pages

Bottom line: if you put a file in the pages directory, it will be routed automatically.

In Next.jspages/index.jsis the top page,pages/posts/[id].jsThis is the article page.

The structure should look something like this:

1	`pages/ ├── index.js └── posts/ └── [id].js`

Display article listindex.jsExample:

import Link from &#039;next/link&#039;; const posts = [ { id: &#039;first&#039;, title: &#039;First post&#039; }, { id: &#039;second&#039;, title: &#039;Second post&#039; }, ]; export default function Home() { return (
    <div>
      <h1>Blog List</h1>
      <ul>
        {posts.map((post) =&gt; (
          <li key="{post.id}">
            <link href="{`/posts/${post.id}`}">{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Implementing SSR with getServerSideProps

Retrieving and displaying data on the server side

Conclusion:getServerSidePropsFunctions make SSR easy.

export async function getServerSideProps(context) { const id = context.params.id; const data = await fetch(`https://example.com/api/posts/${id}`).then(res => res.json()); return { props: { post: data, }, }; }

Article details page ([id].js) by inserting this function,The information is retrieved from the server before the page is displayed.

This can't be achieved with React alone.Key features of Next.jsis.

Key points for SEO settings

Head tag and meta information settings

Conclusion:next/headThis makes it easy to set individual SEO tags.

import Head from &#039;next/head&#039;; export default function Post({ post }) { return (
    <>
      <head>
        <title>{post.title}｜My Blog</title>
        <meta name="description" content="{post.summary}" />
      </head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

Not only search engines, but also social mediaCard display when sharingBecause it is also related to
Be sure to set the title, description, and OGP tags.

Completed code list

pages/index.js

import Link from &#039;next/link&#039;; export default function Home() { const posts = [ { id: &#039;first&#039;, title: &#039;First post&#039; }, { id: &#039;second&#039;, title: &#039;Second post&#039; }, ]; return (
    <div>
      <h1>Blog List</h1>
      <ul>
        {posts.map((post) =&gt; (
          <li key="{post.id}">
            <link href="{`/posts/${post.id}`}">{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

pages/posts/[id].js

import Head from &#039;next/head&#039;; export default function Post({ post }) { return (
    <>
      <head>
        <title>{post.title}</title>
        <meta name="description" content="{post.summary}" />
      </head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  ); } export async function getServerSideProps(context) { const { id } = context.params; const res = await fetch(`https://example.com/api/posts/${id}`); const data = await res.json(); return { props: { post: data, }, }; }

summary

In this article, we will use React and Next.js.An SSR-compatible, SEO-friendly blog appwas created.

The key points are:

With Next.jsSSR is possible with React
getServerSidePropsUsingYou can get the data in advance
next/headinSEO measures for each page are possible

If you want a search-friendly blog,The best solution is to use Next.js instead of React aloneis.
From today, you too,SSR-enabled blog developmentPlease try it for the first time.