SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Vercel+Next.jsを活用したWebアプリケーション開発入門

ブログを作りながら学ぶ、Next.jsの便利な5つのコンポーネント(Link、Image、Head、Script、レイアウト)

Vercel+Next.jsを活用したWebアプリケーション開発入門 第3回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事から2回にわたって、「Next.js」の便利な9つの機能をご紹介します。今回は、「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つのコンポーネントを紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。

 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。

 自身でサンプルコードを動かす時間が無い方向けにも一読するだけで理解ができるように配慮しましたので、ぜひ最後まで読んでいただければと思います。

環境準備

 OSは問いません。Node.jsとVisual Studio Codeを利用しますので、それぞれインストールをします。

Node.jsのインストール

 公式サイトより16.15.1LTS(執筆時点)をダウンロードしてインストールしてください。

Visual Studio Codeのインストール

 公式サイトより1.67.2(執筆時点)をダウンロードしてインストールしてください。

Next.jsの便利な9の機能

 Next.jsはシングルページアプリケーション(SPA)を作るにあたって、React.jsをより便利に利用するためのフレームワークです。

 今回から2回にわたって、Next.jsで便利な以下の9の機能を簡潔に紹介していきます。

  1. Linkコンポーネント
  2. Imageコンポーネント
  3. Headコンポーネント
  4. Scriptコンポーネント
  5. レイアウトコンポーネント
  6. グローバル設定
  7. プリレンダリング
  8. 動的ルート
  9. サーバーレス機能

 今回は、1~5の5つのコンポーネントについて解説します。

 それぞれの機能ごとに変更前と変更後のソースコード、サンプルサイトを記載しています。皆様のご環境で実際に動かして体験していただくことを想定してしますが、お時間の無い方はそれらを見ていただくだけでも雰囲気がわかっていただけると思います。

1. Linkコンポーネント

変更前ソース

機能概要

 リンクをクリックしたときブラウザをリフレッシュさせることなく遷移することができます。

機能詳細

 通常のWebページでは<a>タグを使ってリンク先を定義しますが、クリックするとブラウザ全体を描画しなおしてしまい、ユーザーは表示まで待たされる上にデータの転送量が増えます。この機能を利用するとページ全体を読み込みなおすことなく、差分のみ描画がされます。

実装方法

 「pages/posts/first-post.js」を作成し、以下コードを記載します。

// Linkコンポーネントインポートする
import Link from 'next/link';

// ファイル呼び出し時のエントリーポイント
export default function FirstPost() {
  return (
    // HTMLの範囲を示す何らかのタグが必要。
    // 今回は空タグを使用しているが<div>等でもよい
    <>
      <h1>First Post</h1>
      <h2>
        {/* リンク先をhrefで指定する */}
        <Link href="/">
          {/* 表示したい文字を<a>タグで囲う */}
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );
}

 「pages/index.js」を次のように修正します。

import Head from 'next/head'
import Link from 'next/link'; // 追加

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        {/* h1タグのみ修正 */}
        <h1 className="title">
          {/* HTML中にスペースを明示的に入れて改行したい時は{' '}のように書く */}
          Read{' '}
          <Link href="/posts/first-post">
            <a>this page!</a>
          </Link>
        </h1>
// …以下省略

動作確認

 http://localhost:3000をブラウザで開いて確認します。

完成したソース

サンプルサイト

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
2. Imageコンポーネント

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Vercel+Next.jsを活用したWebアプリケーション開発入門連載記事一覧

もっと読む

この記事の著者

山本 誠樹(サイトコア株式会社)(ヤマモト マサキ)

 サイトコア株式会社 セールスグループ パートナーテクニカルイネーブルメントマネージャー。通信系システムや会員管理サービスの設計・開発から保守まで、システムエンジニアとして様々なプロジェクトに約20年従事。近年はクラウドにフォーカスしたコンサルティングを小売・流通・電力系など業種を問わず行う。201...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16473 2022/09/14 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング