本日からReactのフレームワークである『Next.js』の入門も初学者様向けに記事としてやっていきたいと思います。
本日の記事と合わせてこちらも読んでみて下さい。 静的サイトについて触れております。
※最低限の必要条件
・JavaScriptに精通および経験が豊富である必要性があります。 『クラス』『スプレッド演算子』『promise』etcなどの概念の知識は必要不可欠です。
・ローカルでの開発マシンに『Node.js』がインストールされているか
Node.jsはこちらDownload | Node.jsでインストール下さい。
・ある程度のReact知識に精通している
Next.jsとは
Reactはフレームワークではなくライブラリであることはご存知かと思います。
『Next.js』は、Reactアプリケーションのサーバーサイドレンダリング(SSR)、『自動コード分割』、『静的エクスポートオプション』のための強力なReactのフレームワークとなっており
セットアップを必要とせず、すぐに使用できる機能を備えたJavaScriptツールチェーンでもあります。
Reactでのシングルページアプリ(SPA)で発生する最初のページでのダウンロードの問題を解決する事が可能となります。
『Next.js』は、巨大なコミュニティを持つ人気のある、本番環境に対応したアプリケーションを構築するために使用されます。
Reactのフレームワークである『Next.js』は貴方が始めるには全てが事前に構成されている点です。
例えば、始める際に『JavaScriptとTypeScript』、『CSSとSCSS』、『静的エクスポート、サーバーレスデプロイメントモデル』これらいずれかでの選択ができる柔軟性があります。
Next.jsアプリケーションでの構築方法は２つあります。
・1つ目は『手動による作成』です
プロジェクトディレクトリを作成してから『npm』を使用して貴方のプロジェクトに必要な依存関係をインストールしていく必要があります。
手動での構築方法はいずれご紹介致します。
・2つ目は『コマンド』を使用していく方法となります
一般的によく扱われるフレームワークと同様にNext.jsプロジェクトを高速かつ最も簡単にセットアップするためのコマンドが存在します。
本日はこちらを使用してやっていきます。
Next.jsを学習するなら非常に簡単にすぐに始める事が容易です。
プロジェクト作成
『Next.js』アプリを作成する最も簡単な方法は、『create-next-app』コマンドを使用することです。
npx create-next-app my-next-app or yarn create my-next-app
TypeScriptでのプロジェクトが必要な場合は、最後にフラグを追加する必要があります。
npm create my-next-app --typescript or yarn create my-next-app --typescript
このコマンドを使用すると、必要なすべての依存関係を持つプロジェクトを作成してくれます。
新しいプロジェクトにアクセスできるように下記のコマンドを実行し『Next.js』プロジェクトを実行できます。
cd my-next-app ↓ npm run dev or yarn dev
ブラウザを開き『http://localhost:3000』でアクセスします。
『WelcometoNext.js！』とドキュメントのリンクなどが画面に表示されているかと思います。
下記のコマンドは絶対条件の優先で覚えておいて下さい
・npm run dev 開発インスタンスをホットリロード、ファイル監視、タスク再実行で実行させます。 つまり開発用のサーバーを起動させます。
・npm run build プロジェクトを本番用にコンパイル(ビルド)します。
・npm start アプリを実稼働モードで起動させます 本番用にビルドしたアプリを起動。
これで準備は完了となります。
VS Codeで pages/index.js ファイルを開きます。
className='title'>Welcome to Next.js!</h1>
『Welcome to Next.js!』を任意の好きなように変更して下さい。
変更を保存すると、ブラウザのlocalhost:3000がホットリロード機能が自動的にコンパイルされたことに注意しながら、ブラウザーで変更を更新して下さい。
『public』では静的なファイルを保存できるという事になります。
フォルダ構成
ディレクトリに関する規則はありません
自由に構成する事が可能となります。
初期構成ではこのように配置されています。
ディレクトリ内の各ファイルの名前は、WebサイトにアクセスしたときのブラウザのURLパスと一致しパスを含むファイルには、ブラウザのように表示されるURLが含まれこれらはすべては『Next.js』によって自動的に処理されます。
/pages/articles.js
例えばコード内で何からしらの変更をした際、アプリの状態は失われずに即座に自動的にページを反映させます。
・pages/ ページのルート
最も頻繁に作業するフォルダは『pages』です。Nextでは、『.js』内部で定義されたすべてのファイル『pages』が同様の名前のルートにマップされます。
実際のページ以外のもの(テストコンポーネントなど)を下に置かないことだけとなります。
Next.jsが実際のページとしてバンドルして展開するためとなります。
・pages/api APIルートでありアプリケーションのAPIにアクセスするために必要なすべてのコードが含まれます。
・public/
ドメインで公開される静的コンテンツ設定にコードやファイルを入れないように注意して下さい。
・ styles/
スタイルに関するCSSファイルは初期構成から入っております。
『styles/globals.css』は自動的に読み込まれますですので、アプリケーション内すべてのページに反映したいスタイルとなります。
『styles/Home.module.css』ファイルはインポートして使用したファイル間でのクラス名の衝突を回避します。
Sassプリプロセッサを使用する場合はNextがSassとのシームレスな統合を提供してくれます。
Sassをインストールし、デフォルトのスタイルファイルに『.scss』または『.sass』拡張子を置換してあげるだけとなります。
npm install sass --save-dev or yarn add sass --dev
『next.config.js』ファイルは『eslintrc –eslint』構成の設定となります。
『Core Web Vitals』に対しコードベースを検証するようにリンターを構成し、追加のプラグインを使用して拡張します。
ディレクトリ構成する際は例えば一般的には
/public ├ favicon.ico src/ ├ components/elements/
のように実際のアプリ関連のコードとそうでないコードがより明確にさせるように構成します。
詳しいディレクトリ構成は別の記事で解説致します。
ルーティングシステム・別ページ作成
『Next.js』ではページルートとAPIルートの2種類のルートがあります。
『pages』ディレクトリにJavaScriptファイルを作成するだけで自動的にルートに変換されルーティングされるので簡単にページを追加することが容易となります。
『pages』ディレクトリの下に『about.js』ファイルを作成します。
export default function About() {
return <h1>About Pageです</h1>;
}
次に『http://locallhost: 3000/About 』ページを開きアクセスするとページが表示されます。
このようにルーティングの設定を何もしなくても、非常に簡単にページ作成が容易となっております。
ではもう一つのAPIルートをやっていきましょう。
pages/api /フォルダーに『timer.js』ファイルを作成します。
ファイル内は下記のように記述下さい。
React.jsの公式チュートリアルを経験されてる方であればこのタイマーの表示は馴染みがあるかと思います。
export default function handler(req, res) {
res.status(200).json({
time: (new Date()).toLocaleTimeString()
})
}
それでは開発モードでコマンドを叩きブラウザで『http://locallhost: 3000/api/timer』でアクセスすると『JSON』のコンテンツとして応答が返ってきます。
{"time": "現在の時刻"}
APIハンドラーとしては分離されています。
リクエストオブジェクトとレスポンスオブジェクトにアクセスが可能となります。
ルーティングのさらに詳しい詳細については、Next.jsの公式ドキュメントをご覧ください。Next.js by Vercel - The React Framework
サーバーレスなアプリを構築する方向けにNext.jsでは『pages /』フォルダー内の各ページがスタンドアロンのラムダ関数に変換されるサーバーレスデプロイメントモデルをサポートしております。
Next.jsでのサーバレスモードを有効化にするには
『next.config.js』にビルドターゲットを追加する必要があります。
module.exports = {
target: 'serverless'
}
Next.jsを始めた事により、貴方はNext.jsアプリケーションで新しいページを作成し外部APIからデータを取得し、取得したデータをNext.jsページに表示させNext.jsアプリケーションを本番環境でビルドして実行させる事が容易になります。
『Next.js』は最新バージョンで、開発者エクスペリエンスを高レベルに保つだけでなく、パフォーマンスとユーザーエクスペリエンスを向上させるための非常に便利なツールも提供致します。
APIを利用したアプリを構築するために必要なものがすべて揃っており
静的HTMLサイトを生成できるため、ブログや企業サイトなどのコンテンツのみのプロジェクトに最も適したフレームワークとなります。
本日はここまでにしておきます。
最後まで読んで頂きありがとうございました。
今日から貴方が新しく学ぶ時にこの記事が役に立つ事を願います。