初期設定Next.js

4852 ワード
テキストリンク

Next.js

  • サーバ側レンダリング(SSR)フレーム
  • 検索エンジンの最適化
  • クイック初期負荷速度
  • リフレッシュ時に点滅なし
  • pagesフォルダをルータとして使用(構造作成時に注意が必要であり、フォルダツリーがアドレスウィンドウパスである)

    • 設定

    npx create-next-app->項目名記入cd 프로젝트명 npm run devpackage.jsonのスクリプトのチェック
    {
	"scripts": {
    	"test": "echo \"Error: no test specified\" && exit 1",
	    // webpack-dev-server 로 가동
	    "dev": "next dev",
	    // 프로젝트를 빌드하여 .next폴더 생성
	    "build": "next build",
	    // 빌드된 .next를 기준으로 서버를 가동한다.
	    "start": "next start",
	    // html 파일을 내보내기 해준다.
	    "export": "next export"
    }
}

    フォルダ

  • index.jsは最も基本的なスクリーンキャラクターで、フォルダ名ごとにアドレス(http://localhost:3000)
  • デフォルト構成部品ルーティングのエクスポート
  • http://localhost:3000/住所の後ろに別のフォルダ名が
  • ページごとにpagesカタログに記入する部分

    • _document.js

  • 様式表鎖接
  • フォントインプラント
  • 道具プリファレンス(index.htmlと同じ)
  • pageフォルダに作成
    • // page/_documnet.js
import Document, { Head, Main, NextScript } from 'next/document';
import React from 'react';

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          // 여기에 폰트 임포팅
        </Head>
        <body>
          <div id="root">
            <Main />
            <NextScript />
          </div>
        </body>
      </html>
    );
  }
}

    _app.js

  • 汎用CSS e.g.reset-css/common.css
  • ページ切り替え時にレイアウトを保持可能.
  • コンポーネントDidCatchでcustomエラー処理可能

    • pageProps

    return <Component {...pageProps} />;
}
  • データ交換方法で予め導入されている初期オブジェクト
  • メソッドを使用しない場合は空のオブジェクトを渡す

    • imdex.js

  • 基本部品
    • 第1編linuxインストールと一般的なコマンド
    Chrome Consoleウィンドウを使用したJavaScript