これはJavaScript の有名ライブラリであるReact のフレームワークであるNext.js を使ってみた学習メモ。

Next.js のチュートリアルとドキュメントを片手に少しずつやってみる。

公式サイト

導入

Next.js のプロジェクトを作成するコマンド。

1

npx create-next-app [directory]

カレントディレクトリに作成する場合は以下の通り。

1

npx create-next-app .

出来上がったプロジェクトを起動するとこんな感じのページが表示された。

ホットリロード

プロジェクトを作成するとデフォルトでホットリロードが有効なので、pages/index.js の中身を少し変えてみた。

かなり素早くロードされた。

ルーティング

基本的にNext.js ではファイル名に基づいてルーティングされる。

なお、ルーティングされるファイルはpages/に作成する必要がある。

例えばpages/にsample/hello.js を以下のように作成する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// pages/hello.js

import Link from "next/link";

export default function hello(){
  return (
    <div>
        <h1>Hello in Sample</h1>
        <Link href="/">Back to Home</Link>
    </div>
  )
}

開発サーバを立ち上げると、ブラウザからはlocalhost:3000/sample/helloのパスでアクセスできる。

ページ内移動

同一プロジェクト内で、別のページにアクセスする時はaタグなどは用いずに専用の<Link>を利用する。

<Link>はnext/linkをインポートすることで利用可能になる。

画像の表示

Next.js では画像をめちゃくちゃ簡単に読み込める。

SVG形式でも同様に読み込めるため、非常にうれしい。

画像を使用するにはnext/imageから<Image>を利用する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

(参考: https://nextjs.org/learn/basics/assets-metadata-css/assets)

メタデータ

普段<head>として用いられるものはNext.js においては、next/headからHeadを利用する。

これにより、各ページごとに別々のタイトルなどを設定することができる。

全体のページに適用させたい場合は、pages/_app.jsにHeadなどを書き込む。

外部スクリプト

外部スクリプトを読み込むにはnext/scriptのScriptを利用する。

CSS

CSSが定義されたコンポーネントを作成するためにはファイル名に応じた[file].module.cssを作成して、その中にCSSを書き込むことで実装できる。

ルートディレクトリにcomponets/ を作成し、そこにlayout.js とlayout.module.css を作成する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// components/layout.js
import styles from './layout.module.css';

export default function Layout({ children }) {
    return (
        <div className={styles.container}>
            {children}
        </div>
    );
}

1
2
3
4
5
6

/* components/layout.module.css */
.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

これらを作成したら、あとは他のコンポーネントから利用すれば適用される。

例として、先ほどのpages/hello.jsで利用してみる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// pages/hello.js

import Link from "next/link";
import Layout from "../../components/layout";

export default function hello(){
  return (
    <Layout>
        <div>
            <h1>Hello in Sample</h1>
            <Link href="/">Back to Home</Link>
        </div>
    <Layout />
  )
}

実際に利用すると、CSSが適用されていることがわかる。

つかれた

今日はここまで

参考文献