Vue/Nuxt.js 触ってた人が Next.js に入門する

2021-01-03
javascriptreactnext.jstypescript
    

目次

概要

React / Next.jsに入門しました。一番最初のHelloWorldから、簡単なアプリケーションを作成するところまでを記録しました。

はじめに

今まで Vue Nuxt.js を利用したことはありましたが、ReactNext.js は利用したことがありませんでした。 Vueは学習して行く上でつまづく部分が少なく、データバインディング(Vueのmodel)も扱いやすかったです。 しかしながら、「VueよりもReact」論が多く見られたため、Next.js を触ってみることにしました。(React要素は省略)

実施環境

$ node --version
v15.5.0
$ npm --version
7.3.0

学習ガイド

Next.js Learn (Basic) https://nextjs.org/learn/basics/create-nextjs-app に沿って学習していきたいと思います。

Create a Next.js App

まずは Hello World を実施します。 https://github.com/vercel/next-learn-starter はNext.jsのスターターテンプレートとなっています。 これを利用します。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd nextjs-blog
npm run dev

http://localhost:3000/ を開きます。"Welcome to Next.js!" と表示されます。

セットアップ

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/navigate-between-pages-starter"
cd nextjs-blog

ページの作成

pages/posts/first-post.js

export default function FirstPost() {
  return <h1>First Post</h1>
}

http://localhost:3000/posts/first-post にアクセス

pagesディレクトリはルーティングも兼ねている。 ファイル名がパスとなる。

pages/posts/first-post.js # http://localhost:3000/posts/first-post
pages/index.js # http://localhost:3000/

リンク

<Link href="/"></Link> でリンクを実装する。aタグは利用しない。

pages/index.js

import Link from 'next/link'

export default function () {
    return (
        <Link href="/posts/first-post">
          <a>this page!</a>
        </Link>
    )
}

Assets, Metadata, and CSS

セットアップ

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/assets-metadata-css-starter"
cd nextjs-blog

Assets

画像などのアセットは public/に配置する。robots.txtなどもここに配置する。

メタデータ

Headタグを利用する

import Head from 'next/head'
<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

CSSスタイリング

styled-jsxを利用してCSS-in-JSを実現する例。

<style jsx>{`
  …
`}</style>

レイアウトコンポーネント

前提としてコンポーネントはcomponentsディレクトリに配置する

components/layout.js

export default function Layout({ children }) {
  return <div>{children}</div>
}

コンポーネントを利用する場合。

pages/posts/first-post.js

import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  )
}

cssモジュールを作成する場合は

components/layout.module.css

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

components/layout.js

import styles from './layout.module.css'

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

グローバルスタイル

styles/global.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
/* 省略 */

pages/_app.js

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

プリレンダリング

※プリレンダリングの方式についてはこちらで解説しています。

セットアップ

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/data-fetching-starter"

プリレンダリングの2つの方式

  • Static Generation (SSG): ビルド時にHTMLを生成する事前レンダリング方法
  • Server Side Rendering (SSR): クエストごとにHTMLを生成する事前レンダリングする方法

その他にも、Client Side Rendering(CSR)やIncremental Static Regeneration(ISR)が存在します。

https://my-chakra-app-chi.vercel.app/にて、 実際の挙動を確認できます。

その他特徴

  • ページごとレンダリング方式を選択できる

SSGとSSRの使い分け

可能な限りSSGを利用すべき。

SSGの使い道は次のようなもの。

  • マーケティングページ
  • ブログ
  • Eコマース製品リスト
  • ヘルプ&ドキュメント

頻繁に更新されるデータを利用する際にはSSRを利用する。

データがある場合とない場合の静的生成

SSGにおいて getStaticProps を利用すると ビルド時にデータ取得を行い初期データの表示を行う。

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

SSRでは getServerSidePropsを利用する。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

クライアントサイドからデータをフェッチする際にはSWRを利用すべきである。 SEOが関係しないプライベートなユーザー固有のページではクライアントサイドでのレンダリングが向いている。

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

動的ルート

セットアップ

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/dynamic-routes-starter"

ダイナミックルート

/user/taro /user/jiro のようなルーティングを単一のファイルで処理する

ファイル名は [id].js のような書式にする。

例(SSGの場合)

pages/posts/[id].js

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

// getStaticPaths はSSG用APIであり、ダイナミックルート使用時に静的ファイルを生成するためのもの。
export async function getStaticPaths() {
  // fallbackは事前ビルドしたパス以外にアクセスしたときの動作を決めるもの
  return {
    [
      '/path/1',
      '/path/2',
      '/path/3',
    ],
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

この例では getStaticPaths を使用してすべての可能なブログ投稿をフェッチし getStaticPropsを使用してIDを指定して特定の投稿をフェッチします。

APIルーティング

nextでAPIサーバを立てることも可能。

セットアップ

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/api-routes-starter"

シンプルなAPI

pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}

http://localhost:3000/api/hello にアクセスすると次のようなレスポンスとなる。

{ "text": "Hello" }

デプロイ

vercelが良いらしい。

参考にしたサイト

Next.js Learn (Basic) を試して学んだ Next.js の基礎の基礎 - kakakakakku blog https://kakakakakku.hatenablog.com/entry/2020/02/07/113525

Next.jsにおけるSSG(静的サイト生成)とISRについて(自分の)限界まで丁寧に説明する - Qiita https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

JavaScriptで幅優先探索 (bfs) を実装する
bfsソースコード 前提 bfs関数 テストコード JavaScriptで幅優先探索 (bfs) を実装し簡単な最短経路の探索問題を解いてみました。 AtCoderの問題を参考にしています bfsソースコード 前提 bfs 関数の定義について 引数 table…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

最新の投稿

PHP-FPM(php7.4) Apache2.4 on Ubutnu20.04 Webサーバ構築
環境 パッケージの更新 Apache と PHP のインストール Apache のサービスを開始する PHPファイルを作成 参考にしたサイト Ubuntu20.04 に PHP7.4 + Apache2.4 をインストールしてWeb…

PHP-FPM(php7.4) Apache2.4 でWebサーバ構築 on CentOS8
環境 php7.4 のインストール apacheのインストール php-fpmの設定を変更する php-fpm の起動 apacheの起動 確認 おまけ: エラーと解決方法 "System has not been booted with systemd as…

CentOS8 に PHP7.4 インストール
環境 普通にインストールしようとするとphp7.2がインストールされる modularityについて php7.4 インストール CentOS8 に modularity を利用して PHP7.4をインストールした際のメモです。 環境 CentOS8.…

UNIXドメインソケット通信 vs INETドメインソケット通信 php-fpmで動作させる場合の違いについて
結論 ソケット通信について ソケットについて ソケット通信の種類 UNIXドメインソケット通信を行う場合のメリット 参考にしたサイト php-fpm の設定方法で調べた際にIPとポートで設定するパターンとUNIX…

Amplify CLI のインストール
Amplify CLI のインストール Amplify CLI の設定 バックエンド環境作成 Amplify CLI のインストールから設定まで Amplify CLI をインストール 設定 Amplify アプリを初期化 Amplify CLI…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

PHP-Parser で PHP5からPHP7で動くコードに自動修正するツールが作る夢をみた
ツールが備える機能条件 PHP-Parser について PHP-Parser の簡単なサンプル ASTオブジェクトの置換・変更 PHP5からPHP7への変更内容を実装する ex1 includeパスを変更する ex2 例外クラスを Exception…

PHP5からPHP7への移行ツールを作るための解析・自動修正ツールを調べる
PHP5からPHP7への下位互換のない機能 使えそうなツールの洗い出し PHPStan phan php7cc php7mar php-to-7-aid Rector php-ast PHP-Parser まとめ 追記 (2021/01/0…

Tags

Dates

© 2021   404 motivation not found