[NEXT.js] : basic

3182 ワード
next テキストリンク

NEXT.jsが自分で見てやったこと

  • webpack bundling & babel transfiling
  • codesplitting:現在必要なページファイルと論理ファイルのみをロードします.一部のファイルでエラーが発生した場合でも、ロード時間を短縮できます.
  • pre-fetching:リンクラベルやエンベロープなど、次の必要なファイルをプリロードします.

    • ルートはこんなに簡単ですか?


    Create a New Page


    pagesフォルダにフォルダとファイルパスが設定されている場合、そのパスはURLパスになります.
    個別のルーティングライブラリをインストールおよび設定することなく移動できます.pages/posts/first-post => http://localhost:3000/posts/first-post .

    Client-side navigation:リンクとaラベルにページを移動

  • Reactと同様に、aタグを使用して他のページにルーティングすると、画面が点滅してリフレッシュされます.
  • Linkタグを使用して、1ページ内で無停止で転送されます.
  • 背景色を変更してリンクタグをクリックすると、背景色はそのままになります.aタグのみを使用すると、背景色がリフレッシュされ、ページがリフレッシュされることを確認します.
  • また、このリンクタグを使用すると、現在表示されているページにリンクタグに必要なページを事前にロードし、リンクタグに移動するときにページをすばやく切り替えることができます.( prefetching )
  • <Link><a>페이지이동</a></Link>は、リンクタグ内でaタグを使用することを要求するが、実際には、aタグがないとルーティングできないという意味ではない.SEOを考えてaタグを書かせてくれたのですか?
  • ただし、アプリケーション内で作成されたページではなく外部ページを移動する場合は、Linkのみを移動し、ラベルaではありません.△実は、これは新しいページです.リンクラベルを書くと、エラーが発生します.

    • Styling


    造形方法にはCSS Modules, Sass, styled-jsxメソッドが内蔵されており、styled-コンポーネントまたは他のライブラリをインストールする必要があります.
    画像などの既定のタグgastyled-conentsのように作られ、従来の反応方式よりも使用頻度が減少します.
  • スタイルモジュール化
    cssファイルをCSSモジュールにインポートします.
    スタイルを指定した場所にclassnameで反映します.
    構成部品レベルでスキャンが作成されているため、名前の重複を心配する必要がないため、非常に便利です.
    🌱 CSSファイル名はxxです.module.cssで終わる必要があります.

  • Unique Class Name子姓
    モジュールファイルには、.containerというクラス名が使用されます.
    変換を自分で見てクラス名が重なる心配はありません.


  • GlobalStylespages/_app.jsからのみGlobalStylesをインポートできます.
    トップクラスのアプリケーションコンポーネントとして、共通のステータスを共有および維持できます.
    これを利用して、GlobalStylesを適用します.グローバルスタイルが必要な場所からインポートする必要はありません.他の外部からインポートしようとすると、グローバルCSSがページのすべての要素に影響を与えるため、エラーが発生します.

    • その他


    Assetの管理

  • <Img>ラベル:画像のスケーリングと最適化
    Reactionでは、Imgという名前でスタイル要素を作成し、Custom propに渡します.

    • Metadata

  • pageがルーティングされた場合もブラウザウィンドウのTitleを変更できます!
    従来のReactがpublic/index.htmlにtitleを設定したときに単一のタイトルとして保持していたのとは異なります.
    • import Head from "next/head";

//...생략
<Head>
  <title>제목</title>
</Head>
    🌐コメントサイトLearnNext
    AngularJs学習ノート2
    gethノート