1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Next.jsでWebアプリを作った

Last updated at Posted at 2021-08-20

スクリーンショット_2021-10-08_12-19-58.png
はてなブックマークの人気のエントリの取得と、ローカルストレージへの保存を行うWebアプリを作った。
HateB! Reader
コード

以下Next.jsについての備忘録。

##静的レンダリング
アプリのビルド時にレンダリングを行うこと。
表示する値を更新するにはビルドをし直す必要がある。
ブログといった全てのアクセス者に同じコンテンツを提供するWebアプリに向いている。

##getStaticProps
静的レンダリングのためにAPIなどを用いて値を取得するメソッド。

index.tsx
import { NextPage, GetStaticProps } from "next";

const IndexPage: NextPage<{message: string}> = ({ message }) => { /* (省略) */ }

export const getStaticProps: GetStaticProps = async () => {

    return {
        props: {
            message: "ようこそ"
        }
    }

}

データ取得はサーバーで行うため、ブラウザからはアクセスできないCORS未対応のAPIにもアクセスできる。

##getStaticPaths
静的レンダリング + 動的ルーティングを行うためのメソッド。
下記の例ではhttp://hogehoge.com/post/001http://hogehoge.com/post/002 にアクセスが来た際に返すページを作成している。

pages/post/[post_id].tsx
import { NextPage, GetStaticPaths, GetStaticProps } from "next";
import { ParsedUrlQuery } from "querystring";

type Post = {}

const PostPage: NextPage<{post: Post}> = ({ post }) => { /* (省略) */ }

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

    return {
        paths: [{params: {post_id: "001"}}, {params: {post_id: "002"}}]]
        fallback: false
    }

}

export const getStaticProps: GetStaticProps = async ({ params }) => {

    return {
        props: {
             /* ユーザーが定義したメソッド */
             post: getPost((params as ParsedUrlQuery).post_id as string)
        }
    }

}

これらのメソッドはアプリのビルド時に実行される。またpagesディレクトリに存在するコンポーネントでしか使用できない。

##API Route
今回は使わなかったが、Next.jsはAPIを作ることもできる。
以下の例は https://hogehoge.com/api/book?book_id=001 にリクエストを受けた時の処理である。

pages/api/book/index.ts
import { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
    /* リクエストメソッド */
    console.log(req.method)
    /* クエリ 001 */
    console.log(req.query.book_id);
    /* postリクエストなどでリクエストボディを受け取る場合 */
    /* console.log(req.body.xx) */
    /* ここでローカルDBからデータを取ってくることもできる */
    return res.status(200).json({books: []});
}

https://hogehoge.com/api/book/new にしたい場合は同じディレクトリにnew.tsを作れば良い。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?