next.js入門

目次

マーケター、エンジニアを月1時間からジョインできるプラットフォーム

airteamは月1時間からマーケターやエンジニアに相談できるプラットフォーム。 雇うのはハードル高いけどプロをチームに入れたい。そんな経営者のためのサービスです。 相談にのる方も募集しています。

タスクなしだから月一時間からジョイン可能

作業はなくオンライン相談メイン。 月1時間からさっと経験者に継続的に相談できます。

多様な経験者を雇用するより何倍も早くチームに

あらゆるジャンルの経験者がいるので あなたのチームのノウハウの選択肢が広がります。

NDAはすでに締結済み、契約もスムーズ

契約の煩雑なやりとりはなく、NDAはすでに締結済み、書面のやりとりはありません。

これから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のgetServerSidePropsgetStaticProps関数を使用します。

以上のように、Next.jsではpagesディレクトリ内のファイル構造に従ってルーティングを自動的に設定します。この機能により、独自のルーティングシステムを設定する手間を大幅に省くことができます。

なお、より高度なルーティング機能(例えば、カスタムルートパラメータ、マルチレベルの動的ルーティングなど)が必要な場合には、Next.jsのnext/routernext/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タグは、ページがどのように説明され、どのように表示されるべきかによります。