はてなブックマークの人気のエントリの取得と、ローカルストレージへの保存を行うWebアプリを作った。
HateB! Reader
コード
以下Next.jsについての備忘録。
##静的レンダリング
アプリのビルド時にレンダリングを行うこと。
表示する値を更新するにはビルドをし直す必要がある。
ブログといった全てのアクセス者に同じコンテンツを提供するWebアプリに向いている。
##getStaticProps
静的レンダリングのためにAPIなどを用いて値を取得するメソッド。
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/001 か http://hogehoge.com/post/002 にアクセスが来た際に返すページを作成している。
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 にリクエストを受けた時の処理である。
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を作れば良い。