Zenn
🐢

Next.jsのApp RouterでFetchで普通に接続する

2023/10/01に公開
Next.js
TypeScript
fetch
App Router
tech

環境

Nodeのバージョンは以下の通りです

各モジュール バージョン
node v18.16.0
npm 9.5.1

テンプレートの作成

typescriptでテンプレートを作成します。設定はすべて初期設定のままリターンで進めます。

npx create-next-app --typescript
質問 入力内容
√ What is your project named? app-router-fetch
√ Would you like to use ESLint? Yes
√ Would you like to use Tailwind CSS? Yes
√ Would you like to use src/ directory? Yes
√ Would you like to use App Router? (recommended) Yes
√ Would you like to customize the default import alias? No

作成されたモジュールのpackege.jsonの内容は以下となります

モジュール バージョン
@types/node 20.8.0
@types/react 18.2.23
@types/react-dom 18.2.8
autoprefixer 10.4.16
eslint 8.50.0
eslint-config-next 13.5.3
next 13.5.3,
postcss 8.4.31
react 18.2.0
react-dom 18.2.0
tailwindcss 3.3.3
typescript 5.2.2

ファイルの入れ替え

以下のファイルを置き換えます。

src/app/golbals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/layout.tsx
import "./globals.css";

export const metadata = {
  title: "Fetchテストページ",
  description: "Next.jsのApp RouterでFetchで普通に接続する",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className="">{children}</body>
    </html>
  );
}
src/app/page.tsx
'use client'
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

const App = () => {
  const [json, setJson] = useState(null);
  const router = useRouter();
  useEffect(() => {
    const fetchJson = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const json = await response.json();
      setJson(json);
    };
    fetchJson();
  }, []);
  return json ? (
    <div>    
      {json.id}: {json.title}
    </div>
  ) : (
    <div>ローディング中...</div>
  );
};

export default App;

以上となります。

Discussion