Nextjsの基本・応用のメモ

getStaticPropsメソッド

静的ページを作成する際に使うメソッドです．
これを使って作成したページはビルド時に決定されるので，アクセスごとに変化させたいページでは下のgetServerSidePropsを使用する．

getServerSidePropsメソッド

動的ページを作成する際に使うメソッドです．
このメソッドの中では，APIやDBなどから値を取得する処理を記述する．

/next.config.js

外部の画像を使うときにドメインの登録が必要？

/pages/api/*

バックエンドを準備することなくAPIを作成できる．
POST，GETを同じファイルで作成できるのかは要調査．

コンポーネントにデータの渡し方

「...」（3点ドット）はSpread AttributesというJSXの記述方法．
コンポーネントに値をまとめて渡すことができる．
Spread Attributesを使わない場合は，1つずつデータを渡す必要がある．

export default function Header({ title, description }) {
    return (
        <header>
            <h1>{ title }</h1>
            <p>{ description }</p>
        </header>
    )
}

import Header from "./header"

const title = "TITLE"
const description = "DESCRIPTION"
export default function Home() {
    return (
        <div>
            <Header {...{ title, description }/>
        </div>
    )
}

グラフ作成

Nextjsでは、下記のようなライブラリを使うことでグラフを作成できます。
本サイトのグラフページはrechartsを使って作成しています。

• chart.js
• react-chartjs-2
  • 【JavaScript】【React】ReactでChart.jsとchartjs-plugin-zoomを使うには
  • Chartjs tutorial with React — Nextjs with examples
• recharts
  • Recharts
  • Reactのチャート描画ライブラリRechartsで様々なチャートを出力する
  • Reactでオシャレなグラフ・図を簡単に描く(Rechart.js)

RSS/Feedの作成

NextjsでRSS/Feedを作成するために、Feedを使用しました。
GitHubの例にある通り、すべてのpost情報を取得して必要な情報を渡すだけで作成できました。

上記の方法でfeed.xmlを作成するだけでは、他のサイトから読み取られないので、下記の情報をHTMLのheadに追加します。
追加後、feed取得・検知サイトからfeedが追加されていることを確認します。

<link rel="alternate" type="application/rss+xml" title={siteTitle} href="/rss/feed.xml" />