
### WordPress GraphQL API に接続する

WordPress から、Next.js に乗り換えたいけど、WordPress の記事数が多すぎて、データを移行するのが大変という場合は、WordPress の GraphQL API を使って、データを取得することができます。GraphQL は、WordPress のプラグインをインストールすることで、WordPress からデータを取得することができるようになります。

Next.js と TypeScript を使って、WordPress の GraphQL API に接続してデータを取得してみましょう。まずは、WordPress に GraphQL プラグインをインストールして有効化し、API エンドポイントが利用可能になることを確認してください。続いて、`apollo-client` および関連パッケージをプロジェクトにインストールします。

```bash
npm install @apollo/client graphql
```

次に、Apollo Client のインスタンスを作成し、WordPress の GraphQL API エンドポイントを指定します。

```tsx
// lib/apolloClient.ts
import { ApolloClient, InMemoryCache } from '@apollo/client'

const apolloClient = new ApolloClient({
  uri: 'https://your-wordpress-url/graphql',
  cache: new InMemoryCache(),
})

export default apolloClient
```

### クエリを作成してデータを取得する

次に、GraphQL クエリを作成し、WordPress からデータを取得します。ここでは、投稿データを取得するクエリを定義してみます。

```tsx
// graphql/queries.ts
import { gql } from '@apollo/client'

export const GET_POSTS = gql`
  query GetPosts {
    posts {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`
```

### データを Next.js のページで表示する

次に、`getStaticProps` 関数を使って Next.js のページでクエリを実行し、取得したデータを表示します。

```tsx
// pages/index.tsx
import { GetStaticProps } from 'next'
import { useQuery } from '@apollo/client'
import apolloClient from '../lib/apolloClient'
import { GET_POSTS } from '../graphql/queries'

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

type Props = {
  initialPosts: Post[]
}

const Home = ({ initialPosts }: Props) => {
  const { data } = useQuery(GET_POSTS, {
    ssr: false,
  })

  const posts = data?.posts.edges.map(({ node }: any) => node) || initialPosts

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

export const getStaticProps: GetStaticProps = async () => {
  const { data } = await apolloClient.query({
    query: GET_POSTS,
  })

  const initialPosts = data.posts.edges.map(({ node }: any) => node)

  return {
    props: {
      initialPosts,
    },
    revalidate: 60, // 60 seconds
  }
}

export default Home
```

ここでは、`getStaticProps` 関数を使用して、ビルド時にデータを取得し、静的ページを生成しています。`revalidate` オプションにより、60 秒ごとにページを再生成することでデータが更新されるようになります。また、`useQuery` を使ってクライアントサイドでデータを取得し、既存のデータがあればそれを表示します。

### カスタムフックを作成してデータ取得を簡潔にする

データ取得のロジックをカスタムフックにまとめることで、コンポーネントがすっきりとして可読性が向上します。

まず、カスタムフックを定義しましょう。

```tsx
// hooks/usePosts.ts
import { useQuery } from '@apollo/client'
import { GET_POSTS } from '../graphql/queries'

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

export const usePosts = (initialPosts: Post[]) => {
  const { data } = useQuery(GET_POSTS, {
    ssr: false,
  })

  const posts = data?.posts.edges.map(({ node }: any) => node) || initialPosts

  return posts
}
```

次に、`pages/index.tsx` でカスタムフックを使用します。

```tsx
// pages/index.tsx
import { GetStaticProps } from 'next'
import apolloClient from '../lib/apolloClient'
import { GET_POSTS } from '../graphql/queries'
import { usePosts } from '../hooks/usePosts'

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

type Props = {
  initialPosts: Post[]
}

const Home = ({ initialPosts }: Props) => {
  const posts = usePosts(initialPosts)

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

export const getStaticProps: GetStaticProps = async () => {
  const { data } = await apolloClient.query({
    query: GET_POSTS,
  })

  const initialPosts = data.posts.edges.map(({ node }: any) => node)

  return {
    props: {
      initialPosts,
    },
    revalidate: 60,
  }
}

export default Home
```

これで、Next.js と TypeScript を使って WordPress の GraphQL API を使ってデータを取得し、表示する方法が完成しました。カスタムフックを利用することで、コンポーネント内でのデータ取得のロジックが簡潔になり、再利用性が向上します。


Next.js と TypeScript で WordPress の GraphQL API を使ってデータを取得・表示する方法を解説します。

WordPress GraphQL と Next.js を使ったデータ取得


WordPress REST API は、WordPress の情報を外部から取得するための API です。この記事では、WordPress REST API を使って、Next.js と TypeScript を組み合わせたウェブアプリでブログ記事を取得する方法を紹介します。

### 記事の取得と表示

まず、記事を取得するための関数を作成します。この関数では、WordPress REST API のエンドポイントを指定し、記事のデータを取得するようにします。`fetch` を使って、API からのレスポンスを処理します。

```tsx
import { useEffect, useState } from 'react'

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

const fetchPosts = async (): Promise<Post[]> => {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts')
  const data = await res.json()
  return data
}

const Posts = () => {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetchPosts().then((data) => setPosts(data))
  }, [])

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

export default Posts
```

このコードでは、`fetchPosts` 関数を使って、WordPress REST API から記事のデータを取得しています。取得したデータは、`Post` 型の配列として扱われます。`useEffect` を使って、コンポーネントのマウント時にデータを取得し、`useState` で状態を管理します。

### カスタムフックを使った記事取得

次に、カスタムフックを使って、記事の取得と状態管理を切り出す方法を紹介します。これにより、コードの再利用性が向上します。

```tsx
import { useEffect, useState } from 'react'

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

const fetchPosts = async (): Promise<Post[]> => {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts')
  const data = await res.json()
  return data
}

const usePosts = () => {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetchPosts().then((data) => setPosts(data))
  }, [])

  return posts
}

const Posts = () => {
  const posts = usePosts()

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

export default Posts
```

上記のコードでは、`usePosts` というカスタムフックを作成しています。このフックでは、`useState` と `useEffect` を組み合わせて、記事データの状態管理と取得を行っています。`Posts` コンポーネントでは、このカスタムフックを使って記事データを取得し、表示しています。

### 記事詳細ページの作成

最後に、記事詳細ページを作成して、個々の記事を表示する方法を紹介します。

まず、記事詳細ページのコンポーネントを作成します。このコンポーネントでは、記事 ID を受け取り、その ID に対応する記事を取得して表示します。

```tsx
import { useEffect, useState } from 'react'

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

type Props = {
  id: number
}

const fetchPost = async (id: number): Promise<Post> => {
  const res = await fetch(`https://example.com/wp-json/wp/v2/posts/${id}`)
  const data = await res.json()
  return data
}

const PostDetail = ({ id }: Props) => {
  const [post, setPost] = useState<Post | null>(null)

  useEffect(() => {
    fetchPost(id).then((data) => setPost(data))
  }, [id])

  if (!post) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h2>{post.title.rendered}</h2>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }}></div>
    </div>
  )
}

export default PostDetail
```

このコードでは、`fetchPost` 関数を使って、指定された ID の記事データを取得しています。取得したデータは、`Post` 型として扱われます。`useEffect` を使って、コンポーネントのマウント時と ID が変更されたときにデータを取得し、`useState` で状態を管理します。

以上で、WordPress REST API を使って、Next.js と TypeScript を組み合わせたウェブアプリでブログ記事を取得する方法を紹介しました。これらの技術を活用して、独自のウェブアプリを開発してみてください。


WordPress REST API を使って、Next.js と TypeScript を組み合わせたウェブアプリでブログ記事を取得する方法を紹介します。

WordPress REST API と Next.js で情報を取得しよう


### Docker の導入

Docker を使用して、Next.js と TypeScript のプロジェクトを簡単にセットアップし、開発環境を効率化する方法を説明します。まず、`Dockerfile` を作成し、以下の内容を記述します。

```dockerfile
# Dockerfile
FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run", "dev"]
```

次に、`docker-compose.yml` ファイルを作成し、以下の内容を記述します。

```yaml
version: '3'

services:
  nextjs:
    build: .
    ports:
      - '3000:3000'
    volumes:
      - .:/app
      - /app/node_modules
```

### プロジェクトのセットアップ

次に、プロジェクトをセットアップしましょう。まず、`package.json` ファイルを作成し、以下の内容を記述します。

```json
{
  "name": "nextjs-typescript-docker",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^14.17.6",
    "@types/react": "^17.0.20",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2",
    "typescript": "^4.4.2"
  }
}
```

また、TypeScript の設定ファイル `tsconfig.json` を作成し、以下の内容を記述します。

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
```

### コンポーネントの作成

では、Next.js と TypeScript を使ったコンポーネントを作成してみましょう。`components` ディレクトリを作成し、その中に `Hello.tsx` ファイルを作成します。以下の内容を記述します。

```tsx
// components/Hello.tsx
import React from 'react'

type Props = {
  name: string
}

const Hello = ({ name }: Props) => {
  return <div>Hello, {name}!</div>
}

export default Hello
```

このコンポーネントは、`name` というプロップを受け取り、`Hello, {name}!` というメッセージを表示します。

### ページの作成

次に、`pages` ディレクトリを作成し、その中に `index.tsx` ファイルを作成します。以下の内容を記述します。

```tsx
// pages/index.tsx
import React from 'react'
import Hello from '../components/Hello'

const Index = () => {
  return (
    <div>
      <h1>Next.js with TypeScript and Docker</h1>
      <Hello name="world" />
    </div>
  )
}

export default Index
```

このページでは、先ほど作成した `Hello` コンポーネントをインポートし、`name` プロップに "world" を渡しています。これにより、ページに "Hello, world!" というメッセージが表示されます。

### 開発サーバーの起動

Docker を使って開発サーバーを起動しましょう。ターミナルで以下のコマンドを実行します。

```sh
docker-compose up
```

コンテナが正常に起動したら、ブラウザで `http://localhost:3000` にアクセスします。画面に "Next.js with TypeScript and Docker" というタイトルと、"Hello, world!" というメッセージが表示されていることが確認できます。

### まとめ

この記事では、Docker を使って Next.js と TypeScript のプロジェクトを簡単にセットアップし、開発環境を効率化する方法を解説しました。これにより、開発環境の構築や共有が容易になり、プロジェクトを迅速に開始できます。

Docker を活用することで、Next.js と TypeScript のプロジェクトを効率的に開発することが可能です。ぜひこの方法を試してみてください。


Docker を使って Next.js と TypeScript のプロジェクトを簡単にセットアップし、開発環境を効率化する方法を解説します。

Dockerを活用しNext.jsとTypeScriptプロジェクトを効率化


### アコーディオンの基本構造

アコーディオンは、クリックやタップによってコンテンツが展開・縮小される UI コンポーネントです。まず、アコーディオンの基本構造を作成していきましょう。以下のコードはアコーディオンの構造を定義したコンポーネントです。

```tsx
type AccordionProps = {
  title: string
  content: string
  isOpen: boolean
  onToggle: () => void
}

const Accordion = ({ title, content, isOpen, onToggle }: AccordionProps) => {
  return (
    <div>
      <button onClick={onToggle}>{title}</button>
      {isOpen && <div>{content}</div>}
    </div>
  )
}
```

### アコーディオンの状態管理

続いて、アコーディオンの状態を管理するための機能を追加します。React の `useState` フックを利用して、アコーディオンが開いているか閉じているかを管理することができます。

```tsx
import { useState } from 'react'

type AppProps = {
  title: string
  content: string
}

const App = ({ title, content }: AppProps) => {
  const [isOpen, setIsOpen] = useState(false)

  const handleToggle = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div>
      <Accordion title={title} content={content} isOpen={isOpen} onToggle={handleToggle} />
    </div>
  )
}
```

### 複数のアコーディオンを管理

複数のアコーディオンを表示し、それぞれの状態を管理する方法を見ていきましょう。まず、アコーディオンのデータを配列で定義します。

```tsx
const accordionsData = [
  {
    title: 'タイトル1',
    content: 'コンテンツ1',
  },
  {
    title: 'タイトル2',
    content: 'コンテンツ2',
  },
  {
    title: 'タイトル3',
    content: 'コンテンツ3',
  },
]
```

次に、`useState` フックを使って、複数のアコーディオンの開閉状態を管理します。また、`map` メソッドを使って、アコーディオンのデータをループして表示しましょう。

```tsx
import { useState } from 'react'

type AccordionData = {
  title: string
  content: string
}

type AppProps = {
  accordionsData: AccordionData[]
}

const App = ({ accordionsData }: AppProps) => {
  const [openIndexes, setOpenIndexes] = useState<number[]>([])

  const handleToggle = (index: number) => {
    const currentIndex = openIndexes.indexOf(index)
    const newOpenIndexes = [...openIndexes]

    if (currentIndex === -1) {
      newOpenIndexes.push(index)
    } else {
      newOpenIndexes.splice(currentIndex, 1)
    }

    setOpenIndexes(newOpenIndexes)
  }

  return (
    <div>
      {accordionsData.map((accordionData, index) => (
        <Accordion key={index} title={accordionData.title} content={accordionData.content} isOpen={openIndexes.includes(index)} onToggle={() => handleToggle(index)} />
      ))}
    </div>
  )
}
```

このコードでは、`openIndexes` という配列を使って、開いているアコーディオンのインデックスを管理しています。`handleToggle` 関数では、引数で渡されたインデックスが `openIndexes` 配列に含まれているかどうかを確認し、含まれている場合は配列から削除し、含まれていない場合は配列に追加しています。

### まとめ

この記事では、Next.js と TypeScript を使って、アコーディオンを実装する方法を解説しました。アコーディオンの基本構造を定義し、`useState` フックを使って開閉状態を管理し、複数のアコーディオンを表示できるようにしました。この実装方法を参考に、独自のアコーディオンコンポーネントを作成してみてください。


Next.js と TypeScript を使って、簡単にアコーディオンを実装する方法を解説します。

2023-05-08

WordPress GraphQL と Next.js を使ったデータ取得

2023-05-07

WordPress REST API と Next.js で情報を取得しよう

2023-05-06

Dockerを活用しNext.jsとTypeScriptプロジェクトを効率化

2023-05-05

手軽に実装！Next.js と TypeScript でアコーディオンを作る方法