導入Next.js は、軽量の React サーバー側レンダリング アプリケーション フレームワークです。 公式サイトリンク: www.nextjs.cn/ アドバンテージ: ゼロ構成の自動コンパイルとパッケージ化。最初から本番環境向けに最適化されています。 ハイブリッドモード: SSG と SSR 増分静的生成では、ビルド後に静的な事前レンダリングされたページが増分的に追加および更新されます。 TypeScript サポート 高速更新 Facebook クラスのアプリで大規模に実証された、高速で信頼性の高いリアルタイム編集エクスペリエンス。 ファイル システム ベースのルーティング ページ ディレクトリ内の各コンポーネントはルートです。 API ルートは、バックエンド機能を提供するための API エンドポイント (オプション) を作成します。 CSSの組み込みサポート コード分割とバンドルでは、Google Chrome チームによって作成された最適化されたバンドルおよび分割アルゴリズムが使用されます。 Next.jsプロジェクトを作成するNext.js プロジェクトを手動で作成するmkdir nextDemo //プロジェクトを作成 npm init //プロジェクトを初期化 npm i react react-dom next --save //依存関係を追加 package.jsonにショートカットコマンドを追加する 「スクリプト」: { "test": "echo \"エラー: テストが指定されていません\" && exit 1", 「開発」:「次へ」、 "ビルド" : "次のビルド", 「開始」: 「次の開始」 }, ページフォルダとファイルを作成する プロジェクトのルートディレクトリにpagesフォルダを作成し、pagesフォルダにindex.jsファイルを作成します。 関数インデックス(){ 戻る ( <div>こんにちは Next.js</div> ) } デフォルトインデックスをエクスポート プロジェクトを実行する npm 実行 dev creact-next-appはプロジェクトを素早く作成しますcreate-next-app は、Next.js プロジェクトをすばやく作成できるスキャフォールディングです。 npm install -g create-next-app //scaffolding のグローバルインストール create-next-app nextDemo //scaffolding に基づいてプロジェクトを作成 cd nextDemo npm run dev //プロジェクトを実行する ディレクトリ構造の紹介:
ページNext.js では、ページは .js、jsx、.ts、または .tsx ファイルからエクスポートされた React コンポーネントであり、pages ディレクトリに保存されます。各ページはファイル名をルートとして使用します。 pages/about.js というファイルを作成し、次のように React コンポーネントをエクスポートすると、/about パスでアクセスできるようになります。 ルーティングページジャンプには、一般的に 2 つの形式があります。1 つは <Link> タグを使用する方法で、もう 1 つは js プログラミング、つまり Router コンポーネントを使用してジャンプする方法です。 リンク'react' から React をインポートします 'next/link' からリンクをインポートします const ホーム = () => ( <> <div>私はホームページです</div> <div><Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><a>ページ A に移動</a></Link></div> <div><Link href="/pageB" rel="external nofollow" ><a>ページ B へ移動</a></Link></div> </> ) エクスポートデフォルトホーム 注意: <Link> タグを使用してジャンプするのは非常に簡単ですが、注意する必要があるもう 1 つの小さな落とし穴があります。それは、兄弟タグが並んで配置されている状況をサポートしていないことです。 //<div> の書き方が間違っている <リンク href="/pageA" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" > <span>ページ A へ移動</span> <span>フロントエンドブログ</span> </リンク> </div> //正しい書き方 <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <あ> <span>ページ A へ移動</span> <span>フロントエンドブログ</span> </a> </リンク> ルーター'next/router' から Router をインポートします。 <button onClick={()=>{Router.push('/pageA')}}>ページAへ移動</button> パラメータの受け渡しと受け取りNext.js では、パラメータは (path:id) ではなく、クエリ (?id=1) を通じてのみ渡すことができます。 'next/link' からリンクをインポートします // <Link href="/blogDetail?bid=23" rel="external nofollow" ><a>{blog.title}</a></Link> を渡します //ブログ.js 'next/router' から { withRouter} をインポートします 'next/link' からリンクをインポートします const BlogDetail = ({router})=>{ 戻る ( <> <div>ブログ ID: {router.query.name}</div> <Link href="/" rel="external nofollow" ><a>ホームページに戻る</a></Link> </> ) } //withRouter は Next.js フレームワークの高度なコンポーネントであり、ルーティングを処理するために使用されます。export default withRouter(BlogDetail) /********************************************************************************************/ 'next/router' から Router をインポートします。 <button onClick={gotoBlogDetail} >ブログの詳細</button> 関数gotoBlogDetail(){ ルータ.push('/blogDetail?bid=23') } //オブジェクトフォーム関数gotoBlogDetail(){ ルータ.push({ パス名: "/blogDetail", クエリ:{ 入札:23 } }) } <Link href={{pathname:'/blogDetail',query:{bid:23}}><a>ブログの詳細</a></Link> ダイナミックルーティングページ/投稿/[pid].js ルート: /post/abc --> クエリ: { "pid": "abc" } ページ/投稿/[pid]/[コメント].js ルート: /post/abc/a-comment --> クエリ: { "pid": "abc", "comment": "a-comment" } フックイベントフック イベントを使用すると、遷移中にアニメーションをロードしたり、ページ上の一部のリソース カウンターをオフにしたりするなど、さまざまなことを行うことができます。 //ルートが変更されると、Router.events.on('routeChangeStart',(...args)=>{ console.log('1.routeChangeStart->ルートの変更が開始されます。パラメータは次のとおりです:',...args) }) //ルートが変更されると、Router.events.on('routeChangeComplete',(...args)=>{ console.log('routeChangeComplete->ルート変更が完了しました、パラメータ:',...args) }) // トリガー前のブラウザ履歴 Router.events.on('beforeHistoryChange',(...args)=>{ console.log('3, beforeHistoryChange-> ブラウザ履歴を変更する前にトリガーされました、パラメータ:',...args) }) //ルートジャンプでエラーが発生した場合、Router.events.on('routeChangeError',(...args)=>{ console.log('4, routeChangeError-> リダイレクトエラー、パラメータ:',...args) }) /******************************** ハッシュルート***********************************/ Router.events.on('hashChangeStart',(...args)=>{ console.log('5, ジャンプ開始時にhashChangeStart->hashが実行され、パラメータは次のとおりです:',...args) }) Router.events.on('hashChangeComplete',(...args)=>{ console.log('6, hashChangeComplete->hash ジャンプが完了しました。パラメータは次のとおりです:',...args) }) データを取得静的プロパティを取得するビルド時にデータを要求するビルドフェーズでは、ページが静的 HTML ファイルに組み込まれるため、非常に高いパフォーマンスで HTML ファイルにオンラインで直接アクセスできます。 getStaticProps メソッドを使用して、ビルド フェーズ中にページに必要なデータを返します。 // 投稿はビルド時に getStaticProps() によって設定されます 関数 Blog({ 投稿 }) { 戻る ( <ul> {posts.map((投稿) => ( <li>{投稿タイトル}</li> ))} </ul> ) } // この関数はサーバー側でビルド時に呼び出されます。 // クライアント側では呼び出されないので、 // 直接データベースクエリ。「技術的な詳細」セクションを参照してください。 非同期関数 getStaticProps(context) をエクスポートします。 // 投稿を取得するには外部 API エンドポイントを呼び出します。 // 任意のデータ取得ライブラリを使用できます const res = フェッチを待機します('https://.../posts') const posts = res.json() を待機します // { props: { posts } } を返すことで、Blogコンポーネントは // ビルド時にプロパティとして `posts` を受け取ります 戻る { 小道具: { 投稿、 }, } } デフォルトのエクスポートブログ サーバーサイドプロパティを取得する訪問ごとにデータをリクエストするページに非同期の getServerSideProps メソッドをエクスポートし、次にリクエストが行われるたびにサーバー上でこのメソッドを呼び出します。
関数 Page({データ}) { // データをレンダリングします... } // これはリクエストごとに呼び出されます 非同期関数 getServerSideProps(context) をエクスポートします。 // 外部APIからデータを取得する const res = フェッチを待機します(`https://.../data`) const データ = res.json() を待機します // props 経由でページにデータを渡す 戻り値: { プロパティ: { データ } } } デフォルトページをエクスポート CSS サポートグローバルスタイルシートの追加アプリケーションにスタイルシートを追加するには、pages/_app.js ファイルに CSS ファイルをインポートします。 コンポーネントレベルのCSSの追加[名前].module.css //ログインモジュール.css .ログインDiv{ 色: 赤; } //サードパーティのスタイルを変更する.loginDiv:global(.active){ 色:rgb(30, 144, 255) !重要; } './login.module.css' からスタイルをインポートします <div className={styles.loginDiv}/> Next.js を使用すると、.scss および .sass 拡張子を持つ Sass ファイルをインポートできます。 CSS モジュールと .module.scss または .module.sass 拡張機能を介してコンポーネントと Sass を使用できます。 npm i sass --save Sass コンパイラを構成する場合は、 next.config.js ファイルで sassOptions パラメータを使用できます。 定数パス = require('path') モジュール.エクスポート = { sassオプション: { includePaths: [path.join(__dirname, 'styles')], }, } CSS-in-JS 既存の CSS-in-JS ソリューションを使用できます。 最も単純なのはインライン スタイルです。 <p style={{ color: 'red' }}>こんにちは</p> styled-jsxを使用するコンポーネントは次のようになります 関数HelloWorld() { 戻る ( <div> こんにちは世界 <p>スコープが設定されました!</p> <スタイルjsx>{` p { 色: 青; } div { 背景: 赤; } @media (最大幅: 600px) { div { 背景: 青; } } ` </スタイル> <スタイル グローバル jsx>{` 体 { 背景:黒; } ` </スタイル> </div> ) } デフォルトのHelloWorldをエクスポートする カスタムヘッダー <ヘッド> <title>テクニカルファットな人たちが一番太っている! </タイトル> <メタ文字セット='utf-8' /> </ヘッド> 以上で、Next.js入門チュートリアルの記事は終了です。Next.js入門のコンテンツをさらにご覧になりたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Apache ab を使用して HTTP パフォーマンス テストを実行する
>>: MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介
この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...
導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...
<br />原文: http://andymao.com/andy/post/103.h...
目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...
1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...
目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...
ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...
ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...
この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具...
REPLACE構文REPLACE(String,from_str,to_str)つまり、String...
コード: <input type="text" class="t...
MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...
目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...
1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...