react入門 8 with Nextjs

リアクトのwebフレームワークとしてユーザー数の多いnextjsを勉強することにしました。チュートリアルが素晴らしく、記事を書く意味を見出せないところもありますが、コンパクトに概要をまとめることを目的としたいと思います。

大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita

Next.jsとは

Vercel社がMITライセンスで提供する、Reactベースのフレームワークです。
以下の機能を提供します。

コンパイリング

reactスタイルで書かれたコード、typescriptやJSXなど、人にわかりやすい記述のスクリプトなどをブラウザが解釈できるJSなどに変換します。

ミニファイング

ブラウザが解釈できるJSでも、スペースや改行などがあるとブラウザ上で実行する際に動作が遅くなるので、スペースや改行などを削除し、実行に最適な形に変換します。

バンドリング

サードパーティーのライブラリや、開発中の複雑な依存関係（import)をまとめ、Webサイトにアクセスした際のファイル（JS)呼び出しの数を減らします。

コードスプリッティング

バンドリングの際に、そのWebページにあった形でJSファイルを最適に分けて、ページにアクセスされた際に、不要なコード呼び出しを減らしたり、共通で呼び出されるヘッダ部分のコードなどは事前に呼び出しを済ませておいたりします。

ビルドタイム、ビルドステップ

ユーザが開発したコードを、サーバーサイド（nodejs）とクライアントサイド（ブラウザ）それぞれに適した形に変換します。

レンダリング最適化

サーバーサイドレンダリングと静的サイト生成は、事前レンダリングに分類されます。データやreactコンポーネントはユーザのアクセス前にhtmlに変換されています。クライアントサイドレンダリングは、ユーザのブラウザ上でhtmlが動的に生成されます。事前レンダリングはインタラクティブ性には欠けますが、高速です。Next.jsはページ単位でこれらを制御できます。

用語

チュートリアルを実施していく中で、前提として必要な用語があったので整理しておきます。かんぜんに個人メモですね。

HeadlessCMS

頭のないコンテンツマネジメントシステム。頭のある？コンテンツマネジメントとして、Wordpressがある。記事や写真などのコンテンツを管理（編集追加削除）して表示までしている。Noteも頭のあるCMSに分類されそう。
対して、ヘッドレスCMSは、表示はreactなどで、開発出来る。どうやって表示のフロントエンドに、ヘッドレスCMSが管理するコンテンツを渡すかというと、REST APIとGraphQLという技術がメジャー。

REST APIとGraphQL

RESTはいわゆる古典的な方法で、HTMLのGET、POSTでリクエストしたキー（ユーザIDなど）に対応するフォーマットの決まったデータをJSONで受け取るイメージ。GraphQLはユーザIDなどと共にリクエストしたJSON形式でデータを受け取るイメージです。

GraphQLとREST | GraphQLチュートリアル

これまでの書き方の違い

reactのチュートリアルでは、コンポーネントに読み取り専用引数を受け取る際に、propsのドット表記でpropsの要素にアクセスしていました。

//index.js

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
    
const jsonobj ={
    "name":"tomy",
    "id":1
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <StrictMode>
        <App a={jsonobj} b={"hello"} c={100}/>
    </StrictMode>
)

//App.js

const App = (props)=>{

    return(
        <>
        <p>{props.a.name}</p>
        <p>{props.a.id}</p>
        <p>{props.b}</p>
        <p>{props.c}</p>
        </>
    )
}

export default App

Nextjs では、外部のデータフェッチ（読み込み）の際に、さまざまな機能の特殊なpropsを扱うので、通常のpropsとの混乱を避けたいのか、コンポーネントの引数のところでオブジェクトの分割代入の構文で下記のように表記することが多いようです。

//App.js

const App = ({a,b,c})=>{

    return(
        <>
        <p>{a.name}</p>
        <p>{a.id}</p>
        <p>{b}</p>
        <p>{c}</p>
        </>
    )
}

export default App

あと、JSXを返すコンポーネントのreturn ばっかり書いていると、return{}となっているときにびっくりしてしまいますので、下記もご参考に

Reactで()と{}の違いはなんですか？

Nextjsを次回から８０００字でまとめます！