
### 1. WordPress のデータをエクスポート

まずはじめに、WordPress の記事データをエクスポートしましょう。WordPress 管理画面の「ツール」>「エクスポート」から、すべての投稿データを XML 形式でエクスポートします。このデータを使って、後ほど Markdown 形式に変換します。

### 2. エクスポートしたデータを Markdown に変換

WordPress のデータをエクスポートしたら、次にそのデータを Markdown 形式に変換します。以下の TypeScript コードを用いて、XML ファイルを読み込んで Markdown に変換することができます。

```tsx
import fs from 'fs'
import xml2js from 'xml2js'
import TurndownService from 'turndown'

const parser = new xml2js.Parser()
const turndownService = new TurndownService()

fs.readFile('exported-wordpress-data.xml', 'utf-8', (err, data) => {
  if (err) throw err

  parser.parseString(data, (err, result) => {
    if (err) throw err

    const posts = result.rss.channel[0].item
    posts.forEach((post) => {
      const content = post['content:encoded'][0]
      const markdown = turndownService.turndown(content)
      fs.writeFileSync(`./markdown/${post.title[0]}.md`, markdown, 'utf-8')
    })
  })
})
```

このコードを実行すると、エクスポートされた XML ファイルから各投稿データを抽出し、Markdown 形式に変換して、指定されたフォルダに保存されます。

### 3. Next.js プロジェクトで Markdown データを読み込む

次に、Next.js プロジェクトで Markdown データを読み込み、記事一覧や記事詳細ページを生成しましょう。

まずは、`getPosts` という関数を作成し、プロジェクト内の Markdown ファイルを読み込むようにします。

```tsx
// lib/posts.ts

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'markdown')

export type PostData = {
  id: string
  title: string
  date: string
  content: string
}

export function getPosts(): PostData[] {
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map((fileName) => {
    const id = fileName.replace(/\.md$/, '')
    const fullPath = path.join(postsDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')
    const { data, content } = matter(fileContents)

    const postData: PostData = {
      id,
      title: data.title,
      date: data.date,
      content,
    }
    return postData
  })

  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1))
}
```

この `getPosts` 関数は、Markdown ファイルからデータを取得し、`PostData` 型の配列を返します。

次に、記事一覧ページと記事詳細ページを作成します。

記事一覧ページ (`pages/index.tsx`) の作成：

```tsx
import { GetStaticProps } from 'next'
import Link from 'next/link'
import { PostData, getPosts } from '../lib/posts'

type Props = {
  allPostsData: PostData[]
}

const Home = ({ allPostsData }: Props) => {
  return (
    <div>
      <h1>記事一覧</h1>
      <ul>
        {allPostsData.map(({ id, date, title }) => (
          <li key={id}>
            <Link href={`/posts/${id}`}>
              <a>{title}</a>
            </Link>
            <br />
            <small>{date}</small>
          </li>
        ))}
      </ul>
    </div>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const allPostsData = getPosts()
  return {
    props: {
      allPostsData,
    },
  }
}

export default Home
```

記事詳細ページ (`pages/posts/[id].tsx`) の作成：

```tsx
import { GetStaticPaths, GetStaticProps } from 'next'
import { PostData, getPosts } from '../../lib/posts'

type Props = {
  postData: PostData
}

const Post = ({ postData }: Props) => {
  return (
    <div>
      <h1>{postData.title}</h1>
      <small>{postData.date}</small>
      <div dangerouslySetInnerHTML={{ __html: postData.content }} />
    </div>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = getPosts().map((post) => ({
    params: { id: post.id },
  }))
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const postData = getPosts().find((post) => post.id === params.id)
  return { props: { postData } }
}

export default Post
```

これで、Next.js プロジェクトに記事一覧ページと記事詳細ページが追加されました。これらのページでは、`getStaticProps` と `getStaticPaths` を使って、Markdown ファイルから読み込んだデータを表示します。

これで、WordPress の記事を Markdown に変更し、Next.js に乗り換える方法を実装することができました。Next.js と TypeScript を使って、簡単に WordPress の記事を移行できるようになります。


WordPress の記事を Markdown に変更し、Next.js に乗り換える方法を Next.js と TypeScript を用いて解説します。

Markdown で WordPress 記事を Next.js に移行する方法

Jamstack のメリットとデメリットを、Next.js と TypeScript を用いたソースコードを通じて分かりやすく解説します。

Jamstack とは何なの？メリットとデメリットはあるの？


### ヘッドレス CMS とは

ヘッドレス CMS（Content Management System）とは、従来の CMS とは異なり、フロントエンド（表示部分）とバックエンド（データ管理部分）が切り離された設計の CMS です。これにより、コンテンツの管理と表示が独立して行われるため、柔軟な開発が可能になります。

従来の CMS では、テンプレートエンジンやプラグインを使ってデザインや機能を追加・変更していましたが、ヘッドレス CMS では API を通じてデータを取得・送信することで、フロントエンドとバックエンドを自由に組み合わせることができます。これにより、ウェブサイト、モバイルアプリ、IoT デバイスなど、様々なプラットフォームへの対応が容易になります。

また、ヘッドレス CMS は、開発者が選んだフロントエンド技術（React、Angular、Vue.js など）を使用して、自由度の高いデザインや機能を実現できます。これにより、ウェブサイトのパフォーマンスやユーザーエクスペリエンスの向上が期待できます。

ヘッドレス CMS の主な利点は、フロントエンドとバックエンドの独立性、柔軟な開発、プラットフォーム間の互換性、そして高い自由度です。これらの特徴により、現代のウェブ開発においてヘッドレス CMS は非常に重要な役割を果たしています。

#### ヘッドレス CMS 比較表

|ヘッドレスCMS|特徴|価格|
|---|---|---|
|Contentful|使いやすいインターフェース、強力なAPI、幅広い機能を備えたオールインワンソリューション。|月額99ドルから|
|Strapi|柔軟で拡張性の高いオープンソースプラットフォーム。|無料から|
|ButterCMS|使いやすく、セットアップが簡単な、中小企業向けのCMS。|月額19ドルから|
|Ghost|高速でスケーラブルな、パーソナライズされた体験を提供するCMS。|月額29ドルから|
|Directus|データベースに直接アクセスできる使いやすい、オープンソースのCMS。|無料から|
|KeystoneJS|カスタマイズ性の高い、モジュール式のCMS。|月額29ドルから|
|Sanity|使いやすく、スケーラブルな、API駆動型のCMS。|月額79ドルから|
|Prismic|使いやすく、柔軟な、コンテンツ管理と配信のためのエンタープライズソリューション。|要お問い合わせ|
|Storyblok|使いやすく、スケーラブルな、カスタマイズ可能なCMS。|月額49ドルから|

ヘッドレス CMS を選択する際には、次の要素を考慮することが重要です。

- 必要な機能
- 予算
- 開発者のスキルレベル
- スケーラビリティ
- サポート

ヘッドレス CMS は、コンテンツの管理と配信に柔軟性と拡張性を提供したい企業に最適です。また、ヘッドレス CMS は、ユーザーエクスペリエンスを向上させるために、Web サイトやアプリケーションのデザインやレイアウトを自由に制御したい企業にも適しています。

それでは、ヘッドレス CMS の中でも、特に Next.js と相性の良い海外のサービスを 5 つ選び、それぞれを Next.js と TypeScript で使う方法を解説します。

### 1. Contentful

Contentful は、API ベースのヘッドレス CMS で、Next.js と簡単に統合できます。以下のコードは Contentful からデータを取得して表示する Next.js コンポーネントの例です。

まず、`contentful` パッケージをインストールします。

```bash
npm install contentful
```

次に、`ContentfulClient.ts` ファイルを作成し、以下のように記述します。

```tsx
import { createClient, Entry } from 'contentful'

const space = process.env.CONTENTFUL_SPACE_ID
const accessToken = process.env.CONTENTFUL_ACCESS_TOKEN

const client = createClient({
  space: space,
  accessToken: accessToken,
})

export async function fetchEntries<T>(contentTypeId: string): Promise<Entry<T>[]> {
  const entries = await client.getEntries<T>({ content_type: contentTypeId })
  return entries.items
}

export default client
```

最後に、`pages/index.tsx` でデータを取得し、表示します。

```tsx
import { GetStaticProps } from 'next'
import { fetchEntries } from '../lib/ContentfulClient'

type Post = {
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchEntries<Post>('post')

  return {
    props: {
      posts,
    },
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.title}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage
```

### 2. Strapi

Strapi は、オープンソースで自己ホスト可能なヘッドレス CMS です。以下のコードは、Strapi からデータを取得して表示する Next.js コンポーネントの例です。

まず、`axios` パッケージをインストールします。

```bash
npm install axios
```

次に、`StrapiClient.ts` ファイルを作成し、以下のように記述します。

```tsx
import axios from 'axios'

const api = axios.create({
  baseURL: process.env.STRAPI_API_URL,
})

export async function fetchPosts<T>(): Promise<T[]> {
  const { data } = await api.get<T[]>('/posts')
  return data
}

export default api
```

最後に、`pages/index.tsx` でデータを取得し、表示します。

````tsx
```tsx
import { GetStaticProps } from 'next'
import { fetchPosts } from '../lib/StrapiClient'

type Post = {
  id: number
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchPosts<Post>()

  return {
    props: {
      posts
    }
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage
````

### 3. Sanity

Sanity は、リアルタイム編集機能を持つヘッドレス CMS です。以下のコードは、Sanity からデータを取得して表示する Next.js コンポーネントの例です。

まず、`@sanity/client` パッケージをインストールします。

```bash
npm install @sanity/client
```

次に、`SanityClient.ts` ファイルを作成し、以下のように記述します。

```tsx
import sanityClient from '@sanity/client'

const client = sanityClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATASET,
  useCdn: true,
})

export async function fetchPosts<T>(query: string): Promise<T[]> {
  const posts = await client.fetch<T[]>(query)
  return posts
}

export default client
```

最後に、`pages/index.tsx` でデータを取得し、表示します。

```tsx
import { GetStaticProps } from 'next'
import { fetchPosts } from '../lib/SanityClient'

type Post = {
  _id: string
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchPosts<Post>(`*[_type == "post"]{ _id, title, content }`)

  return {
    props: {
      posts,
    },
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post._id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage
```

### 4. Prismic

Prismic は、スライス機能を提供するヘッドレス CMS です。以下のコードは、Prismic からデータを取得して表示する Next.js コンポーネントの例です。

まず、`prismic-javascript` パッケージをインストールします。

```bash
npm install prismic-javascript
```

次に、`PrismicClient.ts` ファイルを作成し、以下のように記述します。

```tsx
import Prismic from 'prismic-javascript'

const apiEndpoint = process.env.PRISMIC_API_ENDPOINT
const accessToken = process.env.PRISMIC_ACCESS_TOKEN

const client = Prismic.client(apiEndpoint, { accessToken })

export async function fetchPosts<T>(documentType: string): Promise<T[]> {
  const response = await client.query(Prismic.Predicates.at('document.type', documentType))
  return response.results as T[]
}

export default client
```

最後に、`pages/index.tsx` でデータを取得し、表示します。

```tsx
import { GetStaticProps } from 'next'
import { fetchPosts } from '../lib/PrismicClient'

type Post = {
  id: string
  data: {
    title: string
    content: string
  }
}

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchPosts<Post>('post')

  return {
    props: {
      posts,
    },
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.data.title}</h2>
          <p>{post.data.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage
```

### 5. DatoCMS

DatoCMS は、イタリア発のヘッドレス CMS で、リアルタイムアップデートが可能です。以下のコードは、DatoCMS からデータを取得して表示する Next.js コンポーネントの例です。

まず、`graphql-request` パッケージをインストールします。

```bash
npm install graphql-request
```

次に、`DatoCMSClient.ts` ファイルを作成し、以下のように記述します。

```tsx
import { GraphQLClient } from 'graphql-request'

const client = new GraphQLClient(process.env.DATO_CMS_API_URL, {
  headers: {
    authorization: `Bearer ${process.env.DATO_CMS_API_TOKEN}`,
  },
})

export async function fetchPosts<T>(query: string): Promise<T[]> {
  const data = await client.request<{ posts: T[] }>(query)
  return data.posts
}

export default client
```

最後に、`pages/index.tsx` でデータを取得し、表示します。

```tsx
import { GetStaticProps } from 'next'
import { fetchPosts } from '../lib/DatoCMSClient'

type Post = {
  id: string
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

const query = `
  query {
    posts: allPosts {
      id
      title
      content
    }
  }
`

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await fetchPosts<Post>(query)

  return {
    props: {
      posts,
    },
  }
}

const IndexPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default IndexPage
```

これで、海外のおすすめのヘッドレス CMS サービス 5 つと、それぞれを Next.js と TypeScript で使う方法を解説しました。ぜひ、参考にしてみてください。


海外のおすすめヘッドレスCMSサービスを5つ選び、それぞれをNext.jsとTypeScriptで使う方法を解説します。

Next.js対応の海外のヘッドレスCMS比較5選


### 1. WordPress のデータをエクスポート

WordPress から Next.js に乗り換えるには、まず WordPress のデータをエクスポートする必要があります。ここでは、REST API を使ってデータを取得します。

```ts
import axios from 'axios'

const getWordPressPosts = async () => {
  const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts')
  return response.data
}
```

### 2. エクスポートされたデータを Next.js で取り込む

次に、エクスポートされたデータを Next.js で取り込みます。`getStaticProps` を使ってデータを取得し、props としてコンポーネントに渡します。

```tsx
// pages/posts/index.tsx
import type { GetStaticProps } from 'next'
import { getWordPressPosts } from '../../lib/api'

type Post = {
  id: number
  title: string
  content: string
}

type Props = {
  posts: Post[]
}

const PostsPage = ({ posts }: Props) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
      ))}
    </div>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const posts = await getWordPressPosts()
  return { props: { posts } }
}

export default PostsPage
```

### 3. スタイルと機能の移行

最後に、WordPress のテーマやプラグインに依存していたスタイルや機能を Next.js で再現します。以下に、シンプルなサイドバーを実装する例を示します。

```tsx
// components/Sidebar.tsx
import { useState } from 'react'

type Props = {
  items: string[]
}

const Sidebar = ({ items }: Props) => {
  const [activeIndex, setActiveIndex] = useState<number | null>(null)

  const handleClick = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index)
  }

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} onClick={() => handleClick(index)}>
          <h3>{item}</h3>
          {activeIndex === index && <div>コンテンツがここに表示されます</div>}
        </div>
      ))}
    </div>
  )
}

export default Sidebar
```

これで、WordPress から Next.js に乗り換える準備が整いました。上記の手順を参考に、独自のスタイイルや機能を移行して、Next.js のパワフルな機能を活用しながら、高速でモダンなウェブサイトを構築しましょう。

### 4. ルーティングとページ生成

WordPress のページや投稿に対応する静的ページを Next.js で生成するには、`getStaticPaths` を使用します。ここでは、すべての投稿のスラッグを取得し、それらを使ってページを生成します。

```tsx
// pages/posts/[slug].tsx
import type { GetStaticPaths, GetStaticProps } from 'next'
import { getWordPressPosts, getWordPressPostBySlug } from '../../lib/api'

type Post = {
  id: number
  title: string
  content: string
}

type Props = {
  post: Post
}

const PostPage = ({ post }: Props) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getWordPressPosts()
  const paths = posts.map((post) => `/posts/${post.slug}`)
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await getWordPressPostBySlug(params.slug as string)
  return { props: { post } }
}

export default PostPage
```

### 5. 画像やメディアの扱い

Next.js では、`next/image` を使用して、最適化された画像を提供することができます。以下に、WordPress から取得した画像を表示する例を示します。

```tsx
// components/FeaturedImage.tsx
import Image from 'next/image'
import type { ImageLoaderProps } from 'next/image'

type Props = {
  src: string
  alt: string
  width: number
  height: number
}

const myLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `${src}?w=${width}&q=${quality || 75}`
}

const FeaturedImage = ({ src, alt, width, height }: Props) => {
  return (
    <div>
      <Image loader={myLoader} src={src} alt={alt} width={width} height={height} layout="responsive" />
    </div>
  )
}

export default FeaturedImage
```

### 6. SEO 対策

Next.js では、`next/head` を使用して、各ページのメタ情報を設定することができます。以下に、タイトルやディスクリプションを設定する例を示します。

```tsx
// components/Seo.tsx
import Head from 'next/head'

type Props = {
  title: string
  description: string
}

const Seo = ({ title, description }: Props) => {
  return (
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
    </Head>
  )
}

export default Seo
```

これで、WordPress から Next.js に乗り換える準備が整いました。上記の手順を参考に、独自のスタイイルや機能を移行して、Next.js のパワフルな機能を活用しながら、高速でモダンなウェブサイトを構築しましょう。


WordPressからNext.jsに乗り換える方法を、Next.jsとTypeScriptを使用して分かりやすく解説します。

WordPressからNext.jsへのスムーズな移行


### ページネーションの実装方法

Next.js と TypeScript を使って、WordPress から乗り換えた際のページネーションを作成する方法を解説します。まずは、Next.js の `getStaticProps` を利用してデータを取得し、ページネーションを構築していきます。

#### getStaticProps を使ったデータ取得

まず、ページネーション用のデータを取得するために、Next.js の `getStaticProps` を使います。ここでは、例として、ブログ記事のデータを取得するものとします。

```tsx
import { GetStaticProps } from 'next'

type Post = {
  id: number
  title: string
  content: string
}

type Props = {
  posts: Post[]
  currentPage: number
  totalPages: number
}

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const page = context.params?.page ? parseInt(context.params.page as string) : 1
  const postsPerPage = 10

  // データ取得処理 (例: APIからデータ取得)
  const { posts, totalCount } = await fetchPosts(page, postsPerPage)

  const totalPages = Math.ceil(totalCount / postsPerPage)

  return {
    props: {
      posts,
      currentPage: page,
      totalPages,
    },
  }
}
```

#### ページネーションコンポーネントの作成

次に、ページネーションを表示するコンポーネントを作成します。

```tsx
type PaginationProps = {
  currentPage: number
  totalPages: number
}

const Pagination = ({ currentPage, totalPages }: PaginationProps) => {
  const isFirstPage = currentPage === 1
  const isLastPage = currentPage === totalPages

  return (
    <div>
      {!isFirstPage && <a href={`/posts/page/${currentPage - 1}`}>前へ</a>}
      <span>{currentPage}</span> / <span>{totalPages}</span>
      {!isLastPage && <a href={`/posts/page/${currentPage + 1}`}>次へ</a>}
    </div>
  )
}
```

#### ページネーションを使ったページの表示

最後に、ページネーションコンポーネントを使ってページを表示します。

```tsx
const Blog = ({ posts, currentPage, totalPages }: Props) => {
  return (
    <div>
      <h1>ブログ記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <Pagination currentPage={currentPage} totalPages={totalPages} />
    </div>
  )
}

export default Blog
```

これで、`Blog` コンポーネントにページネーションが実装されました。`posts` に表示する記事データが入り、`currentPage` と `totalPages` によってページネーションが制御されます。

### 動的なページ生成の設定

ページネーションによって生成される各ページに対応するために、Next.js の動的なページ生成機能を利用します。これにより、記事一覧ページの URL にパラメータを付与してアクセスすることができます。

#### getStaticPaths の設定

`getStaticPaths` を使って、動的に生成されるページのパスを設定します。

```tsx
import { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
  const postsPerPage = 10

  // 全記事数を取得 (例: APIからデータ取得)
  const totalCount = await fetchTotalPosts()

  const totalPages = Math.ceil(totalCount / postsPerPage)

  const paths = Array.from({ length: totalPages }, (_, index) => ({
    params: { page: (index + 1).toString() },
  }))

  return { paths, fallback: false }
}
```

これで、動的に生成されるページのパスが設定されました。`fetchTotalPosts` 関数は、全記事数を取得するために使用されます。API などのデータソースからデータを取得する関数を実装してください。

#### 動的なページのファイル名設定

`pages` ディレクトリ内に、動的なページを生成するためのファイルを作成します。ファイル名は、`[page].tsx` としてください。

```plaintext
pages/
  posts/
    [page].tsx
```

これで、`/posts/page/2` などの URL でページネーションされた記事一覧ページにアクセスできます。

### まとめ

今回は、WordPress から Next.js に乗り換えた際のページネーションを Next.js と TypeScript を使って実装する方法を解説しました。`getStaticProps` と `getStaticPaths` を使ってデータ取得と動的なページ生成を行い、ページネーションコンポーネントを作成して表示する方法を紹介しました。

この方法を応用すれば、WordPress 以外のデータソースからもページネーションを実装することができます。さらに、デザインや機能をカスタマイズして、独自のページネーションを作成することも可能です。


WordPressからNext.jsに乗り換えたときのページネーションの作り方をNext.jsとTypeScriptを用いて解説します。

2023-05-10

Markdown で WordPress 記事を Next.js に移行する方法

2023-05-10

Jamstack とは何なの？メリットとデメリットはあるの？

2023-05-10

Next.js対応の海外のヘッドレスCMS比較5選

2023-05-10

WordPressからNext.jsへのスムーズな移行

2023-05-10

WordPressから移行したNext.jsでのページネーション実装方法