1. WordPress のデータをエクスポート
WordPress から Next.js に乗り換えるには、まず WordPress のデータをエクスポートする必要があります。ここでは、REST API を使ってデータを取得します。
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 としてコンポーネントに渡します。
// 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 で再現します。以下に、シンプルなサイドバーを実装する例を示します。
// 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 を使用します。ここでは、すべての投稿のスラッグを取得し、それらを使ってページを生成します。
// 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 から取得した画像を表示する例を示します。
// 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 を使用して、各ページのメタ情報を設定することができます。以下に、タイトルやディスクリプションを設定する例を示します。
// 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 のパワフルな機能を活用しながら、高速でモダンなウェブサイトを構築しましょう。