😽

reactチュートリアル1（create a nextjs app）

2024/03/04に公開

Create a Next.js App | Learn Next.js

React を使用して完全な Web アプリケーションを最初から構築するには、考慮する必要がある重要な詳細が数多くあります。

コードは、webpack などのバンドラーを使用してバンドルし、Babel などのコンパイラーを使用して変換する必要があります。
コード分割などの運用環境の最適化を行う必要があります。
パフォーマンスと SEO のために、一部のページを静的に事前レンダリングしたい場合があります。サーバー側レンダリングまたはクライアント側レンダリングを使用することもできます。
React アプリをデータストアに接続するには、サーバー側のコードを記述する必要がある場合があります。
フレームワークはこれらの問題を解決できます。しかし、そのようなフレームワークには適切なレベルの抽象化が必要です。そうでないと、あまり役に立ちません。また、コード作成時にあなたとあなたのチームが素晴らしいエクスペリエンスを確実に得られるように、優れた「開発者エクスペリエンス」も必要となります。

Next.js: React フレームワーク

React フレームワークであるNext.jsの説明に入っていきます。Next.js は、上記の問題すべてに対する解決策を提供します。しかし、もっと重要なことは、React アプリケーションを構築する際に、あなたとあなたのチームが成功落とし穴にハマることです。

Next.js は、クラス最高の開発者エクスペリエンスと、次のような多くの組み込み機能を提供することを目指しています。

直感的なページベースのルーティングシステム (動的ルートのサポート付き)
プリレンダリング、静的生成(SSG) とサーバー側レンダリング(SSR) の両方がページごとにサポートされています。
自動コード分割によるページ読み込みの高速化
最適化されたプリフェッチによるクライアント側ルーティング
組み込みの CSSおよびSass サポート、およびあらゆるCSS-in-JSライブラリのサポート
高速リフレッシュをサポートする開発環境
サーバーレス関数を使用して API エンドポイントを構築するためのAPI ルート
完全に拡張可能

Next.js は、世界最大のブランドの多くを含む、何万もの本番環境向けの Web サイトや Web アプリケーションで使用されています。

このチュートリアルについて

この無料の対話型コースでは、Next.js の使用を開始する方法を説明します。

このチュートリアルでは、非常に単純なブログアプリを作成することで Next.js の基本を学びます。最終結果の例を次に示します。

https://next-learn-starter.vercel.app (ソース)

このチュートリアルは、JavaScript と React の基本的な知識があることを前提としています。React コードを書いたことがない場合は、まず公式の React チュートリアルを実行する必要があります。

代わりにドキュメントを探している場合は、Next.js ドキュメントにアクセスしてください。

会話に参加する

Next.js またはこのコースに関連する質問がある場合は、 Discordのコミュニティに質問してください。
始めましょう！

Setup - Create a Next.js App | Learn Next.js

設定

まず、開発環境の準備ができていることを確認しましょう。

Node.js がインストールされていない場合は、ここからインストールしてください。Node.js バージョン18以降が必要です。
このチュートリアルでは、独自のテキストエディターとターミナルアプリを使用します。
Windows を使用している場合は、Git for Windows をダウンロードし、それに付属する Git Bash を使用することをお勧めします。このチュートリアルでは、UNIX 固有のコマンドをサポートしています。Windows Subsystem for Linux (WSL) も別のオプションです。

Next.js アプリを作成する

Next.js アプリを作成するには、ターミナルを開いて、cdでアプリを作成するディレクトリに移動し、次のコマンドを実行します。

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

内部では、これはcreate-next-appNext.js アプリをブートストラップすると呼ばれるツールを使用します。フラグを通じてこのテンプレートを使用します--example。

うまくいかない場合は、こちらのページをご覧ください。

開発サーバーを実行する

これで、 nextjs-blogという新しいディレクトリができました。それでは始めてみましょう

cd nextjs-blog
npm run dev

これにより、 Next.js アプリの「開発サーバー」 (これについては後で詳しく説明します) がポート3000で起動します。

動作するかどうかを確認してみましょう。ブラウザから http://localhost:3000 を開きます。

Welcome to Next.js - Create a Next.js App | Learn Next.js

http://localhost:3000 にアクセスすると、次のようなページが表示されるはずです。これは、Next.js に関する役立つ情報を示すスターターテンプレートページです。

Alt text

ヘルプが利用可能:行き詰まった場合は、 GitHub Discussionsのコミュニティに問い合わせることができます。

Editing the Page - Create a Next.js App | Learn Next.js

スターターページを編集してみましょう。

Next.js 開発サーバーがまだ実行されていることを確認してください。
pages/index.jsテキストエディタで開きます。
<h1> タグの下で「Welcome to」というテキストを見つけて、「Learn」に変更します。
ファイルを保存します。
ファイルを保存するとすぐに、ブラウザは新しいテキストでページを自動的に更新します。

Alt text

よくやった！最初のレッスンはここまでです。

次のレッスンでは、さらにページを作成し、ページ間の移動について説明します。

開発サーバーは実行したままにしておく必要がありますが、再起動したい場合は、Ctrl + c を押してサーバーを停止します。