これからnext.jsをはじめたいというエンジニアさん向けにざっくりとした概要を解説します。
next.jsとは?
next.jsはreactベースのフレームワーク。reactはライブラリになります。特徴は下記。
- dynamic routesで直感的なrouting
- static generation(SSG)とserver-side rendering(SSR)の両方のpre-rendering方式をページごとにサポート。これによりSEO対策はしやすい。
- Development環境でのFast Refreshのサポート。これによりコード変更時に更新しなくても変更されます。
各ファイルの役割
- pages:各ページのファイル。index.jsがルートのファイル
- public:画像ファイルなど
- styles:cssの設定
https://nextjs.org/docs/getting-started/project-structure
詳しくは上記
ページの作成
nex.jsでページを作成する際にpagesフォルダにファイルを作っていく。index.jsがサイトのトップページになります。
/pages/index.js
export default function Home() {
return (
<h1>トップページ</h1>
)
}
上記のようにページの内容を書いていきます。returnの中にhtmlを書いていきます。厳密にはhtmlではなく、JSXと言われる言語でこのreturnで返ってきたものを組み合わせてページを構築していきます。
要素のくくり方
JSXでは一つの要素しか返せないため必ずタグで囲まないといけないのですが、毎回divで囲んでいると意味のないdivが大量生産されます。ただ要素をまとめたいだけのときは<>で囲みます。
リンクの設定
Link componentを使ってclient-side navigationを用いた遷移ができます。client-side navigationはJavaScriptが表示ページとURLをクライアント側だけで変更するので、通常のページ遷移よりも高速になります。
import Link from 'next/link'
export default function Home() {
return (
<>
<link rel="icon" href="/favicon.ico" />
<>
)
routingの設定
Next.jsでは、ルーティングは基本的にはファイルベースで、pages
ディレクトリ内のファイル構造に基づいて自動的に行われます。
例えば、以下のようなpages
ディレクトリ構造があるとします:
pages/
├─ index.js
├─ about.js
└─ blog/
├─ index.js
└─ [slug].js
この場合、各ファイルは以下のURLにマッピングされます:
-
pages/index.js
→/
-
pages/about.js
→/about
-
pages/blog/index.js
→/blog
-
pages/blog/[slug].js
→/blog/:slug
[slug].js
のようなファイル名は動的ルーティングを表します。この場合、/blog/:slug
のようなパスでアクセスされたとき、:slug
部分は任意の文字列に置き換えることができます。
例えば、/blog/my-first-post
にアクセスすると、pages/blog/[slug].js
がレンダリングされます。このとき、slug
部分の値(この場合my-first-post
)はページコンポーネントのprops
経由で取得することができます。これにはNext.jsのgetServerSideProps
やgetStaticProps
関数を使用します。
以上のように、Next.jsではpages
ディレクトリ内のファイル構造に従ってルーティングを自動的に設定します。この機能により、独自のルーティングシステムを設定する手間を大幅に省くことができます。
なお、より高度なルーティング機能(例えば、カスタムルートパラメータ、マルチレベルの動的ルーティングなど)が必要な場合には、Next.jsのnext/router
やnext/link
モジュールを使用します。これらのモジュールを使用すれば、プログラム的にルートの変更や、クライアントサイドのナビゲーションなどを行うことができます。
metaタグの設定
Next.jsでmetaタグを設定するためには、通常Reactの組み込みコンポーネントである<head>
を使用します。これはnext/head
からインポートされ、HTMLの<head>
エレメントに対応します。
以下にその使用例を示します:
import Head from 'next/head'
export default function Page() {
return (
<div>
<Head>
<title>マイページタイトル</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="これはマイページの説明です。" />
</Head>
<p>Hello world!</p>
</div>
)
}
このようにHead
コンポーネント内にmetaタグを配置することで、ページ固有のmeta情報を設定できます。
一部のSEO関連のmetaタグについて:
-
<title>
: ページのタイトルを設定します。これはブラウザのタブや検索エンジン結果で表示されます。 -
<meta name="description">
: ページの概要を設定します。これは検索エンジンの結果に表示され、ページの内容を簡単に説明します。 -
<meta name="viewport">
: レスポンシブデザインを制御します。”initial-scale=1.0, width=device-width”と設定すると、デバイスのスクリーン幅に基づいてページがレンダリングされます。これはモバイルフレンドリーなページのために重要です。
この他にも多くの種類のmetaタグが存在します。使用するmetaタグは、ページがどのように説明され、どのように表示されるべきかによります。