チャプター13

URL構造

URL構造はSEO戦略の重要な一部です。GoogleはSEOの各要素の重要度を公開していませんが、最終的にランキング要因として大きいか小さいかに関わらず、優れたURLはベストプラクティスと見なされています。

いくつかの原則に従うことをお勧めします。

意味論的：IDやランダムな番号の代わりに単語を使用する、意味論的なURLを使用するのが最善です。例：/learn/course-1/lesson-1 よりも /learn/basics/create-nextjs-app の方が優れています。
論理的で一貫性のあるパターン：URLは、ページ間で一貫性のある何らかのパターンに従うべきです。例えば、すべての製品ページをグループ化するフォルダを用意したい場合、各製品に対して異なるパスを持つのではなく、そうするべきです。
キーワード中心：Googleは、ウェブサイトに含まれるキーワードに基づいて、そのシステムの相当部分を今でも構築しています。ページの目的を理解しやすくするために、URLにキーワードを使用することをお勧めします。
パラメータベースではない：URLを構築するためにパラメータを使用することは、一般的に良い考えではありません。ほとんどの場合、それらは意味論的ではなく、検索エンジンがそれらを混乱させ、結果でのランキングを低下させる可能性があります。

Next.js でルーティングを定義するには？

Next.js では、ファイルシステムルーティングをファイルシステムルーティングの概念に基づいて使用します。これはページの概念に基づいています。pages ディレクトリにファイルを追加すると、それは自動的にルーティングとして利用可能になります。pages ディレクトリ内のファイルとフォルダは、最も一般的なパターンを定義するために使用できます。

いくつかの簡単なURLを見て、Next.jsルーターにそれらをどのように追加するかを見てみましょう。

ホームページ：https://www.example.com → pages/index.js
一覧：https://www.example.com/products → pages/products.js または pages/products/index.js
詳細：https://www.example.com/products/product → pages/products/product.js

ブログやEコマースサイトの場合、製品IDまたはブログ名をURLのスラッグとして使用するのが一般的です。これは動的ルーティングと呼ばれます。

製品：https://www.example.com/products/nextjs-shirt → pages/products/[product].js
ブログ：https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

動的ルーティングを使用するには、products または blogs サブフォルダ内のページ名に角括弧を追加できます。

SSG を使用して最適化されたページの一例を次に示します。

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Set fallback to blocking. Now any new post added post build will SSR
  // to ensure SEO. It will then be static for all subsequent requests
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

SSR を使用したもう 1 つの例を次に示します。

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

URL構造

Next.js でルーティングを定義するには？

さらに読む

チャプターを完了しました。13