CRAからの移行(次のアプリを作成)反応.js

5366 ワード
react nextjs テキストリンク
私は最近、反応アプリをブートストラップcreate-react-app 次へ.js主な理由は、アプリケーションをより多くの次のインデックスを作ることによってSEOを改善することでした.サーバー側のレンダリングを有効にするJS.このブログ記事は移行プロセスに必要なステップをカバーします.

必要条件next パッケージ( version 10 )をインストールする必要があります.

NPMスクリプト
必要なスクリプトはpackage.json .
  • build ビルドの生産使用のためのアプリケーション.next ディレクトリ).
  • dev 指定したポートの開発サーバを実行します.
  • start 指定したポートの生産サーバを実行します.
    • {
  "scripts": {
    "build": "next dev -p 1234",
    "dev": "next build",
    "start": "next start -p 1234"
  }
}

    環境変数
    環境変数はNEXT_PUBLIC_ ブラウザで使用できます.dev and start スクリプトは.env.local and .env.production.local ファイル名.
    // .env.local
NEXT_PUBLIC_API_URL=http://localhost:8080

    ヘッドタグ
    ページ固有meta タグの間のコンポーネント関数に格納する必要がありますHead からインポートnext/head ) タグ.共通のリンクタグはpages/_document.js の間Head からインポートnext/document ) タグ.ViewportとCharsetメタタグは、間の別々のコンポーネントに置かれなければなりませんHead からインポートnext/head ) 指定されたキー属性を持つタグ.このアプローチでは、デフォルト値が変更されます.他のメタタグは共通のリンクタグと同じ原則に従うべきです.
    <Head>
  <meta
    key="viewport"
    name="viewport"
    content="width=device-width, initial-scale=1"
  />
</Head>

    ルーティングとページ
    ページは、例えば、ファイル名に基づいてルートに関連付けられます.pages/home.jsx にマップされる/home . デフォルトページディレクトリ./pages ) に変更./src/pages 名前変更src プロパティnext.config.js to ./src . カスタムページが見つかりませんpages/404.js ファイル.Link 反応ルータからのコンポーネントを交換しなければなりませんLink コンポーネントnext/link .
    // next.config.js
module.exports = {
  src: './src'
};

    サービスワーカー
    サービスワーカーは、アプリケーションコンポーネントから登録されるpages/_app.js ファイル使用useEffect フック.
    function App({ Component, pageProps }) {
  useEffect(() => registerServiceWorker(), []);

  return <Component {...pageProps} />;
}

    サードパーティライブラリ
    外部のCSSはpages/_app.js ファイル.
    import 'bootstrap/dist/css/bootstrap.min.css';
    Android学習ノート2
    クイックヒント:Pythonで文字列を反転する