Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
Reactのフレームワークとして有名なのがNext.js。
Next.jsの特徴として挙げられるのは以下の通りです。
- SPAなルーティング
- SSGとSSR
- ページごとにmetadataを設定できる。
- Code Splitting,Pre-fetching
SPAなルーティング
ルーティングはアクセスするアドレスごとにページを割り当てることを言います。Reactは1枚のページだけで完結するWebアプリの作成を考えて設計されていますが、Next.jsを利用することで複数のページを組み合わせてWebアプリを作ることができます。
SSGとSSR
SSG(Static Site Generator)はプロジェクトを静的サイト(必要な処理やデータをすべてHTMLベースで用意してあるもの)として出力する機能。SSR(Server Side Rendering)はサーバー側で表示をすべてレンダリングしたものを表示する機能です。
JavaScriptはWebブラウザ側で表示を生成しますがこれを全部サーバー側で作って表示することができます。
Pre-fetching
遷移先のリンクを事前に読み込み
インストール方法
Next.jsをインストールするためには事前に Node.jsのインストールを完了しておく必要があります。
https://www.agile-software.site/2021/05/06/node-js/現在操作しているディレクトリ直下にmy-appディレクトリが作成されます。
npx create-next-app . --use-npmnext.js開発サーバの起動
npm run devディレクトリ構成
ディレクトリはpages, styles, node_modules, publicの4つ。README.mdとpackage.jsonとpackage-lock.jsonの3つのファイルができています。
react-app
├── node_modules
├── pages
├── styles
├── public
└───README.md
└───package.json
└───package-lock.json| pages | 表示するWeb＠ページの内容がまとめられています。 |
| styles | スタイルシートファイルがまとめられています。 |
| node_modulesフォルダ | プロジェクトで必要なnpmのパッケージがまとめられています |
| public | 公開するリソース類(イメージファイルなど)がまとめられています |
index.js
Headコンポーネントがインポートされているのが分かります。
JSXは<body>内で表示される内容だけを記述するようになっているため<head>部分は書く必要がありません。なのでタイトルなどは<Head>を使って書くことになります。
headとはメタデータを各ページごとに追加できるようにしたもの。
これによりそれぞれのページがどんなページなのかクローラーに伝えることが出来る。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
……中略……
</Head>
<main className={styles.main}>
……中略……
</main>
<footer className={styles.footer}>
……中略……
</footer>
</div>
)
}Home.module.css
stylesフォルダの下に「Home.module.css」というcssファイルが用意されています。
このファイルをindex.jsで読み込むことによってスタイルを適用することができます。
Tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestnpx tailwindcss init@tailwind base;
@tailwind components;
@tailwind utilities;Next.jsではpagesディレクトリにファイルを作成するだけで自動でルーティングが設定されるため簡単に静的ページを作成することができます。
