【初心者向け】Next.jsの機能まとめてみた

2021.10.01

2021.10.02

Fabeee社員ブログ

こんにちは、くま五郎です!

朝の空気に初秋の気配が感じられる頃となりましたが、皆様いかがお過ごしでしょうか?

今回はNext.jsの基本的な機能について簡単にお話していきたいと思います。

というのも最近業務でNext.jsを触る機会が増えており初心者として1から勉強している真っ最中なので、自分自身の復習も兼ねて記事を書くことにしました。

よろしければお付き合いください!

Next.jsとは?

Next.jsはVercel社によって作られたReactベースのフロントエンドフレームワークです。

Rectのフレームワークと聞いて真っ先にNext.jsを思い浮かべる方ももしかしたら多いのではないでしょうか?

Reactではクライアント側のブラウザでレンダリングをしますが、Next.jsを使うことでサーバー側のレンダリングや静的Webサイトの生成を可能にします。

これにより各ページ読み込み時のダウンロードファイルサイズの削減やSEOに有利といったメリットがあります。

Next.jsで出来ること

それではNext.jsの機能について、実装コードと共に紹介していきましょう!

URLのルーティングを自動生成

Next.jsではpages ディレクトリ内のフォルダやファイルの構成に従って自動にルーティングが設定されます。

ルーティングライブラリ等は必要なく、pagesディレクトリにJSファイルを置くだけで簡単にページ追加出来ます。

 

例えば以下のような pages/about.js というファイルを作成すると、 /about にアクセスすることが出来ます。

// pages/about.js

function About() {
return <div>About</div>
}

export default About

pages/about/index.js にファイルを作成した場合も、同様に /about へのアクセスが可能です。

 

また、動的ルーティングはブラケット記法を使用します。

pages/posts/[id].js というファイルを作成すると、 /posts/1/posts/2 といったページにアクセスすることが出来ます。

画像の最適化

2020年10月にリリースされたNext.js 10では、画像の表示を最適化してくれるコンポーネントとして next/image が追加されました。

デフォルトでレスポンシブや遅延ロードが有効になっており、ブラウザや画像サイズ、拡張子に応じて自動で最適化を行ってくれます。

 

next/imageコンポーネントをインポートし、 <img /> 要素を少し書き換えるだけで導入出来ます。

import Image from 'next/image'

function Home() {
 return (
  <>
   <h1>My Homepage</h1>
   <Image
    src="/me.png"
    alt="Picture of the author"
    width={500}
    height={500}
   />
   <p>Welcome to my homepage!</p>
  </>
 )
}

export default Home

SSR

SSR(Server Side Rendering)は、リクエストの度にサーバー側でレンダリングを行ったものをクライアントへ返すというものです。

ビルドされた後にもデータを更新出来るので、ページを常に最新状態に維持する必要があるページに向いています。

 

Next.jsでは getServerSideProps という関数を使うことでSSRの実装が可能です。

function Page({ data }) {
  // Render data...
}

// すべてのリクエストで呼び出される
export async function getServerSideProps() {
  // 外部APIからデータを取得
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // propsでPageにデータを渡す
  return { props: { data } }
}

export default Page

SSG

SSG(Static Site Generation)は、ビルド時に一括してレンダリングを行います。各リクエストに再利用されるため、SSRと比べて表示速度は非常に高速です。

ビルドされた後にデータを更新する必要がないページに向いています。

 

Next.jsでは getStaticProps という関数を使うことでSSGの実装が可能です。

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// ビルド時に呼び出される
export async function getStaticProps() {
  // 外部APIからデータを取得
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // { props: { posts } }を返すことで、
  // ビルド時にBlogコンポーネントがpostsを受け取る
  return {
    props: {
      posts,
    },
  }
}

export default Blog

また、 pages/posts/[id].js といった動的ルーティングを静的なファイルとして生成したい場合には、 getStaticPaths を使用することが推奨されています。

function Post({ post }) {
  // Render post...
}

// ビルド時に呼び出される
export async function getStaticPaths() {
  // 外部APIからデータを取得
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // データに基づいて事前レンダリングするパスを取得
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // ビルド時に取得したパスのみを事前レンダリングする
  // { fallback: false } は他のルートが404であることを意味します
  return { paths, fallback: false }
}

// 同様にビルド時に呼び出される
export async function getStaticProps({ params }) {
  // paramsには投稿idが含まれている
  // ルートが/posts/1のような場合、params.idは1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // propsでPostにデータを渡す
  return { props: { post } }
}

export default Post

まとめ

Next.jsには非常に便利な機能が用意されていますね。

個人的にはSSR、SSGといったPre Renderingのサポートが魅力的だと感じました。Reactを使うかNext.jsを使うかの判断基準の1つにもなりそうです。

React経験者であれば覚えることもそう多くはないので、ぜひ一度Next.jsを触ってみてはいかがでしょうか?

今回紹介しきれなかった機能もあるので、気になる方は公式ドキュメントもチェックしてみてください。

 

最後まで読んでいただきありがとうございました!

またどこかでお会いしましょう!

 

Fabeee編集部

Fabeee編集部

こちらの記事はFabeee編集部が執筆しております。