はじめに
僕の大好きな Next.js について書きます。
まだまだ新しい技術であり、最近やっと本格的に採用されるようになってきた感じがします。
とはいえ、まだまだドキュメントも少なく、初心者が始めるには公式のチュートリアルに沿って進めていくのが、最も効果的な学習方法だと思います。
ですが世の中には
ゆっくりチュートリアルなんてやってられるか！！！！
俺はとりあえず触ってみたいだけなんだ！！！！
という欲張りな方もいると思います。
今回はそんな方のために、とりあえずサクッと書き始められる までの設定をまとめたいと思います。
前提条件
npm : 6.14.5
Next.jsアプリの作成
まずはターミナルで以下のコマンドを実行して、Next.jsアプリを作成します。
$ npx create-next-app
しばらくするとプロジェクト名を聞かれるので、任意の名前を入力しましょう。
今回は sample と入力します。
? What is your project named? > sample
次にテンプレートの選択を聞かれます。
今回はまっさらな状態の物を作りたいので Default starter app を選択します。
✔ What is your project named? … sample
? Pick a template › - Use arrow-keys. Return to submit.
❯ Default starter app
Example from the Next.js repo
success! と表示されたら完了です。
ここから、プロジェクト内の基本設定を行っていきます。
共通のレイアウトコンポーネントの作成
全てのページにメタデータなどの共通情報を書き込むのは非効率ですよね。
共通のレイアウトコンポーネントを作成しましょう。
プロジェクト直下に component ディレクトリを作成して、 layout.js を作成しましょう。
$ mkdir component
$ cd component
$ touch layout.js
layout.js のなかでレイアウトコンポーネントを作成します。
import Head from 'next/head'
import Link from 'next/link'
export default function Layout({ children }) {
return (
<div>
<Head>
<link rel="icon" href="/favicon.ico" />
// 共通のメタデータなどはここに記載
</Head>
<main>
{children} // ここにコンテンツが埋め込まれるイメージ
</main>
</div>
)
}
プロジェクト直下の pages/index.js を作成したレイアウトに埋め込みます。
import Head from 'next/head'
import Layout from '../components/Layout' // 作成したレイアウトコンポーネントを読み込む
export default function Home() {
return (
<Layout> // レイアウトタグでコンテンツを囲む
<div>
</div>
</Layout>
)
}
これで共通のレイアウトコンポーネントの作成が完了しました。
CSSファイルの作成
最初の状態だとCSSがファイル内に書かれていたと思います。
でも、やはりCSSは別ファイルで管理したいですよね。
グローバルCSSの設定
ここでは、すべてのページで読み込まれるCSSを設定します。
全てのページで読み込む必要のないCSSは後述します。
まずはプロジェクト直下の pages ディレクトリに _app.js というファイルを作成します。
（先ほどのコマンドでcomponentディレクトリにいる人はpagesディレクトリに移動してください）
$ touch _app.js
次に styles ディレクトリを作成して global.css 作成します。
（先ほどのコマンドでpagesディレクトリにいる人はプロジェクト直下に移動してください）
$ mkdir styles
$ touch global.css
先ほど作成した _app.js ファイルでコンポーネントを作成していきます。
このコンポーネントは、全てのページに共通するトップレベルのコンポーネントになります。
つまり、ここでの設定は全てのコンポーネントに共通して設定されます。
import '../styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
これでグローバルCSSファイルを読み込むことができるようになりました。
コンポーネント別CSSファイルの作成と読み込み
先ほど作成したCSSファイルは全てのコンポーネントで読み込まれてしまうため、そこに全てのCSSを書いてしまうのは良い手法とは言えません。
コンポーネント別にCSSを適応してみましょう。
先ほどの styles ディレクトリ内に style.module.css というファイルを作成します。
（先ほどのコマンドでpagesディレクトリにいる人はプロジェクト直下に移動してください）
$ touch style.module.css
このように、CSSを使う際は CSSモジュール を利用します。
そのため、ファイル名の末尾は module.css でなければなりません。
あとは使いたいコンポーネント内で、モジュールをインポートするだけです。
import styles from './layout.module.css' // CSSモジュールを読み込む
import Head from 'next/head'
import Link from 'next/link'
export default function Layout({ children }) {
return (
<div>
<Head>
<link rel="icon" href="/favicon.ico" />
// 共通のメタデータなどはここに記載
</Head>
<main className={styles.sample}> // クラス名はこのように読み込む
{children}
</main>
</div>
)
}
以上で基本的な設定は終わりです。
まとめ
Next.jsは初心者でも触りやすくReactの経験者であればかなり恩恵を受けられる素晴らしいものだと思います。
環境構築で苦戦していてはもったいないので、是非気軽に触ってみてださい。