RESTful API を作成する！！(with Next.js & MongoDB & TypeScript)

​yarn create next-app --example with-typescript プロジェクト名

yarn add mongodb axios

yarn add -D　types/mongodb

​MONGODB_URI= // Your MongoDB connection string
MONGODB_DB= // dbname

import { MongoClient, Db } from 'mongodb';

const { MONGODB_URI: uri, MONGODB_DB: dbName } = process.env;

let cachedClient: MongoClient;
let cachedDb: Db;

if (!uri) {
  throw new Error(
    'Please define the MONGODB_URI environment variable inside .env.local'
  );
}

if (!dbName) {
  throw new Error(
    'Please define the MONGODB_DB environment variable inside .env.local'
  );
}

export async function connectToDatabase() {
  if (cachedClient && cachedDb) { //キャッシュ変数が入力されているか確認
    return { client: cachedClient, db: cachedDb };
  }

  const client = await MongoClient.connect(uri!, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  const db = await client.db(dbName);

  cachedClient = client;
  cachedDb = db;

  return { client, db };
}

export type User = {
-  id: number
+  _id:string
+  id:string
  name: string
}

​import { NextApiRequest, NextApiResponse } from "next";
import { connectToDatabase } from "../../../utils/mongodb";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { method } = req;
    switch (method) {
      case "GET":
        // Get data from mongodb
        const { db } = await connectToDatabase();
        const data = await db.collection("user").find().toArray(); //連想配列化

        res.status(200).json(data); // json 形式でデータを取得

        break;
      default:
        res.setHeader("Allow", ["GET", "PUT"]);
        res.status(405).end(`Method ${method} Not Allowed`);
    }
  } catch (err) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
};

export default handler;

-import { GetStaticProps } from 'next'
+import { GetServerSideProps } from "next";
import Link from 'next/link'

import { User } from '../../interfaces'
import { sampleUserData } from '../../utils/sample-data'
import Layout from '../../components/Layout'
import List from '../../components/List'

type Props = {
  items: User[]
}

const WithStaticProps = ({ items }: Props) => (
  <Layout title="Users List | Next.js + TypeScript Example">
    <h1>Users List</h1>
    <p>
      Example fetching data from inside <code>getStaticProps()</code>.
    </p>
    <p>You are currently on: /users</p>
    <List items={items} />
    <p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </p>
  </Layout>
)

-export const getStaticProps: GetStaticProps = async () => {
-  // Example for including static props in a Next.js function component --page.
-  // Don't forget to include the respective types for any props passed -into
-  // the component.
-  const items: User[] = sampleUserData
-  return { props: { items } }
-}

+export const getServerSideProps: GetServerSideProps = async () => {
+  const response = await axios.get<User[]>+("http://localhost:3000/api/users");
+  const items = await response.data;
+
+  return { props: { items } };
+};

export default WithStaticProps

​import { GetStaticProps, GetStaticPaths } from "next";

import { User } from "../../interfaces";
import Layout from "../../components/Layout";
import ListDetail from "../../components/ListDetail";
import axios from "axios";

type Props = {
  item?: User;
  errors?: string;
};

const StaticPropsDetail = ({ item, errors }: Props) => {
  if (errors) {
    return (
      <Layout title='Error | Next.js + TypeScript Example'>
        <p>
          <span style={{ color: "red" }}>Error:</span> {errors}
        </p>
      </Layout>
    );
  }

  return (
    <Layout
      title={`${
        item ? item.name : "User Detail"
      } | Next.js + TypeScript Example`}
    >
      {item && <ListDetail item={item} />}
    </Layout>
  );
};

export default StaticPropsDetail;

export const getStaticPaths: GetStaticPaths = async () => {
  // Get the paths we want to pre-render based on users
  const response = await axios.get<User[]>("http://localhost:3000/api/users");
  const items = await response.data;

  const paths = items.map((user) => ({
    params: { id: user.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
};

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export const getStaticProps: GetStaticProps = async ({ params }) => {
  try {
    const id = params?.id;
    const response = await axios.get<User[]>("http://localhost:3000/api/users");
    const items = await response.data;

    const item = items.find((data) => data.id === id);
    // By returning { props: item }, the StaticPropsDetail component
    // will receive `item` as a prop at build time
    return { props: { item } };
  } catch (err) {
    return { props: { errors: err.message } };
  }
};