Next.jsの学習まとめ
Create Next App
npx create-next-app nextjs-sample
ルート管理
ReactRouterではそれぞれのコンポーネントでルートを管理していたが、
Pages内のフォルダディレクトリで管理できるようになるメリットがある。
PagesフォルダはNextCreateApp時に追加されるので、これを使用する。
また、ルーティング管理のために特別な名称があり、
index.** というファイル名は"/"を表しており、
_**.というようにアンダーバーから始まる場合はルーティングされず
ルーティング不要なファイルに使用されている。(_app.jsなど)
[].とした場合はパラメータを表し、
[...].**とした場合は複数のパラメータを受け取る。
| 階層1 | 階層2 | 階層3 |
|---|---|---|
| Pages | _app.js | |
| index.js | ||
| main | index.js | |
| content.js | ||
| [articleId].js | ||
| [...slug].js |
上記のようにファイルを作成した場合、
アクセスできるURLは[ / , /main , /main/content , /main/:articleId , /main/* ]となる。
ページリンク
ページ間をリンクするためにはLinkコンポーネントを使用する
<Link href="/main/content" />
<Link href={{
pathname: '/main/:articleId',
query: { articleId: helloworld },
}}
クエリパラメーターの取得
コンポーネント内で現在のパラメーターを取得するためには"next/router"から
useRouterをインポートすることで取得することができる
import { useRouter } from "next/router";
const router = useRouter();
const currentQuery = router.query;
SSG/ISR
- SSG
next.jsではビルド時にプリレンダリングすることで
パフォーマンスの向上やSEO対策を行うことができる。
使い方としてはコンポーネント内で下記を記述する。 - ISR
SSGの欠点として一度ビルドした後は更新されないという点がある。
その欠点を補うためにISRを設定することで自動で更新されるようになる。
revalidateを追加することで更新間隔(秒数)を設定する。
export async function getStaticProps(context) {
return {
props: {},
revalidate: 30,
}
}
また、ルーティングで[**].**というパラメーターを受け取るコンポーネントとした場合、
上記の設定のみだと動かない。
それぞれのパスを設定するために下記のような記述する
export async function getStaticPaths() {
return {
paths: [
{ params: { articleId: "a1" } },
{ params: { articleId: "a2" } },
{ params: { articleId: "a3" } },
],
fallback: true
};
}
pathにはビルド時に生成するパスを全て記述する。
fallbackは3つの設定があり、
trueの場合は事前に設定したパス以外も受け取り見つかった場合はページを表示し、
以降パスのリストに追加される。
falseの場合は事前に設定したパス以外はエラーとなる。
"blocking"を設定した場合は、trueとほぼ同じであるが完全にロードが完了してからページが表示される。
SSR
ReactはCSRのためクライアントのスペックによって表示までに時間がかかってしまうことがある。
Next.jsではSSRを使用でき、これはサーバー側で処理するためスペックに依存しない。
SSRとSSGの違いとしてはSSRはリクエスト毎にページを生成するが、SSGは事前にページを生成し提供している。
SSRの書き方としては下記のように記述する。
export async function getServerSideProps(context) {
return {
props: {},
}
}
また、ページが見つからなかった場合の処理として、
notFoundとRedirectが設定できる
return {
notFound: true,
}
return {
redirect: {
destination: '/',
},
}
Next.js製コンポーネント
Headコンポーネントを使用すると普段htmlに記述しているheadを追加することができる
import Head from "next/head"
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
Imageコンポーネントを使用すると遅延ロードと最適化がされるので基本こちらを使用した方がよい
<Image
src="me.png"
alt="Picture of the author"
width={500}
height={500}
/>
カスタムドキュメント
pagesフォルダ内に下記のように_document.jsを追加するとhtmlの雛形の設定ができる。
主にHtml全体の設定やHeadの設定をここで行う。
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="ja">
<Head/>
<body>
<Main />
<NextScript />
<div id="overlay" />
</body>
</Html>
)
}