地方在住IT系ニート

Hioke

Nextjsの基本・応用のメモ

Table of Contents

getStaticPropsメソッド

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

getServerSidePropsメソッド

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

/next.config.js

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

/pages/api/*

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

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

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

header.jsx
export default function Header({ title, description }) {
    return (
        <header>
            <h1>{ title }</h1>
            <p>{ description }</p>
        </header>
    )
}
home.jsx
import Header from "./header"

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

グラフ作成

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

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" />
にほんブログ村 IT技術ブログ IT技術メモへ