みんなのためのNextjs—Reactの基本的な知識があります

ReactとJavaScriptの基本的な知識があれば、すぐに利用できます。

Next.jsは、Zeitによって作成されたJavaScriptフレームワークです。Reactを使用してサーバー側のレンダリングと静的Webアプリケーションを構築できます。それはあなたの次のウェブサイトを構築するための素晴らしいツールです。これには多くの優れた機能と利点があり、Nextjsを次のWebアプリケーションを構築するための最初のオプションにすることができます。

Next.jsの使用を開始するために、webpackなどの構成は必要ありません。構成が付属しています。必要なのはnpm run dev、アプリケーションを実行してビルドを開始することだけです。

この記事では、Next.jsの優れた機能とコツ、およびそれを使用して次のWebサイトの構築を開始する方法について説明します。

この投稿は、ReactとJavaScriptの基本的な知識があることを前提としています。

Next.jsで構築されたいくつかの素晴らしいウェブサイトは次のとおりです。

  • Syntaxt.fm
  • npmjs
  • マテリアル-ui.io
  • expo.io
  • codemenitor.io

Nextjsを使用して個人のウェブサイトsaidhayani.meを構築しました。ソースコードはGitHubで入手できます。

Next.jsを使い始める

Next.jsを開始するには、node.jsをマシンにインストールする必要があります。これですべてです。Next.jsは、他のnode.jsアプリケーションと同様です。依存関係をインストールするには、npmまたはYarnが必要です。

始めて、Next.jsプロジェクトを作成しましょう。

まず、フォルダを作成して、選択した名前を付ける必要があります。名前を付けnextjs-appます。

このコマンドラインで簡単に行うことができます。

mkdir nextjs-app

nextjs-appフォルダーを作成したら、ターミナルで開きます。実行npm init してpackage.json ファイルを作成します。

次に、依存関係をインストールする必要があります。

Next.jsのインストール

  • 糸を使用して、
yarn add next
  • npmを使用して、次のように入力します。
npm i next --save

次に、Next.jsがReactを使用するため、Reactをインストールする必要があります。以下の最初の行は、インストールにYarnを使用しています。

yarn add react react-dom
// with npm
npm i react react-dom --save

その後、2つの必要なフォルダを作成する必要があります:pagesstatic。Next.jsはそれらなしでは機能しません!!

mkdir pages static

これらのコマンドを実行した後、この構造が必要です。

nextjs-app -pages -static -package.json

そして、単に実行してブラウザでnpm next dev開くことができ//localhost:3000/ ます。

NotFound我々はまだ任意のページを持っていないので、ページが表示されます!

それでは、homeページとエントリポイントを作成しましょうindex.js

touch index.js home.js

そして、通常のReactコンポーネントを作成できます。上で述べたように、Next.jsはReactアプリケーションを構築するためのものです。

これが私たちのhome.jsように見えるものです:

そしてここに私たちのindex.jsファイルがあります:

Next.jsにはライブリロード機能があります。変更して保存するだけで、Next.jsがアプリを自動的にコンパイルして再読み込みします。

:Next.jsは、アプリケーションのデフォルトページを定義するために必要な他のサーバーサイドレンダリングツールと同様ですindex.js。この場合はです。

実行後、ブラウザにこの変更が表示されますnpm next dev

おめでとう!いくつかの簡単な手順でNext.jsアプリを作成しました。Next.jsアプリを作成するためのこれらの手順は、Next.jsの公式ドキュメントで説明されています。

私の代替

私は通常この方法を使用しません。代わりにcreate-next-appCLIを使用します。これにより、これらすべての処理が1行で実行されます。

npx create-next-app my-app

その他の機能については、こちらのドキュメントをご覧ください。

Next.jsのカスタム設定を作成する

Next.jsアプリに依存関係やパッケージを追加したい場合があります。

Next.jsには、next-config.jsファイルを使用して構成をカスタマイズするオプションがあります。

たとえば、アプリにsassサポートを追加したい場合があります。この場合、あなたは次のSASSパッケージを使用する必要がありますし、あなたはそれを追加する必要がありnext-config.js、以下の例のようにファイル:

まず、インストールnext-sass

yarn add @zeit/next-sass

次に、それをnext-config.jsファイル内に含めます。

そして、sassコードを作成してコンポーネントにインポートできます。

コンポーネントにsassファイルをインポートする:

そしてここに結果があります:

うわー、Next.jsアプリにsassサポートを追加するのはとても簡単ではありませんでしたか?

この時点で、インストールと構成の部分について説明しました。それでは、Next.jsの機能について説明しましょう。

機能

Next.jsには、サーバーサイドレンダリング、ルーター、遅延読み込みなどの優れた機能が多数付属しています。

サーバー側のレンダリング

Next.jsは、デフォルトでサーバーサイドレンダリングを実行します。これにより、アプリケーションが検索エンジン向けに最適化されます。また、express.jsやHapi.jsなどのミドルウェアを統合したり、MongoDBやMySQLなどのデータベースを実行したりできます。

検索エンジン最適化と言えば、Next.jsには、Head動的メタタグを追加および作成できるコンポーネントが付属しています。これは私のお気に入りの機能です。カスタムおよび動的なメタタグを作成できます。これらはあなたのウェブサイトがグーグルのような検索エンジンによって索引付けされることができるようにします。Headコンポーネントの例を次に示します。

またHead、他のページでコンポーネントをインポートして使用できます。

驚くばかり!

:Next.jsでは、Reactをインポートする必要ありません。これは、Next.jsが自動的に行うためです。

Next.jsを使用して静的Webサイトを生成する

サーバーサイドレンダリングだけでなく、アプリケーションをHTML静的Webサイトとしてコンパイルおよびエクスポートし、GitHubページやnetlifyなどの静的Webサイトホスティングにデプロイすることもできます。Next.jsを使用して静的Webサイトを作成する方法の詳細については、公式ドキュメントを参照してください。

ルーター

これは、Next.jsの優れた機能の1つです。create-react-appを使用する場合、通常、react-routerをインストールして、そのカスタム構成を作成する必要があります。

Next.jsには、構成がゼロの独自のルーターが付属しています。ルーターを特別に構成する必要はありません。pagesフォルダ内にページを作成するだけで、Next.jsがすべてのルーティング構成を処理します。

先に進んで、すべてを明確にするためのカスタムナビゲーションを作成しましょう!

ページ間を移動するために、Next.jsにはLinkナビゲーションを管理するメソッドがあります。

作成blog.jsしてcontact.jsページを作成しましょう:

blog.js

そしてここにcontact.jsページがあります:

そして今、私たちはそれらのページ間をナビゲートできなければなりませんか?

とても簡単でとても素晴らしいです。

遅延読み込み

遅延読み込みにより、アプリケーションはより優れたユーザーエクスペリエンスを提供します。ページの読み込みに時間がかかる場合があります。読み込みに30秒以上かかる場合、ユーザーはアプリを放棄する可能性があります。

これを回避する方法は、たとえばスピナーを表示するなどして、ページが読み込まれていることをユーザーに示すためのトリックを使用することです。遅延読み込みまたはコード分割は、遅い読み込みを処理および制御できる機能の1つであるため、ページに必要なコードのみを読み込むことができます。

Next.jsには、独自のコード分割メソッドが付属しています。dynamic以下の例のように、コンポーネントをロードするための、というメソッドが提供されます。

これらの例のソースコードはGitHubにあります

それで全部です。それで十分だと思います。この記事で、Next.jsとその機能について明確なアイデアが得られることを願っています。他の機能について詳しくは、公式ドキュメントをご覧ください。

この投稿に他に追加がある場合は、下にコメントを残すことができます。この投稿が気に入った場合は、拍手してください。と共有します。

Twitterで話し合いますか?

ちなみに、私は最近、モバイルアプリケーションの1つで強力なソフトウェアエンジニアのグループと協力しました。組織は素晴らしく、製品は私が一緒に仕事をした他の会社やフリーランサーよりもはるかに速く、非常に迅速に届けられました。私は他のプロジェクトに正直にそれらを推薦できると思います。連絡を取りたい場合は、私にメールを送ってください—[email protected]