Next.js+TypeScript 2の起動

2649 ワード
next.js React typescript テキストリンク
この内容はnextです.jsとnextjs.+比較typescriptの学習に使用
以下のようにして、基本的な設定とnextJS+typescriptの開発を学びます.
下一篇文章:Next.js+TypeScriptの起動
作成したプロジェクトをよく見てみましょう.
プロジェクトの作成については、前の記事を参照してください.

Next.jsプロジェクト


ファイル構造
|-- .next
|-- node_modules
|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- next.config.js
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md

  • .next
    --npm run devの実行時に作成されたフォルダとファイル

  • node_modules
    --インストールされたnpmモジュールに関連するフォルダとファイル

  • pages
    --プロジェクトに表示するページに関連するフォルダ.
    --ページを担当するコンポーネント
    (Nextjsでは、Routingシステムはファイル構造です.そのため、Pagesフォルダでは、ファイル名と構造に独自の約束があります.例えばapp.js、Routing説明は後述~)

  • public
    --画像ファイルなどのプロジェクト用の静的ファイルのフォルダを格納します.

  • styles
    --CSS関連フォルダ

  • .eslintrc.json
    --ESLint設定ファイル

  • next.config.js
    -- Next.jsプロジェクト設定ファイル

  • .gitignore
    --gitバージョン管理で無視するファイル名を記録します.

  • package-lock.json
    --作成したnode modulesフォルダの情報

  • package.json
    --使用するnode modulesについて
    --基本項目の説明

  • README.md
    --プロジェクトファイルに関する情報

    • Next.js+Type Scriptプロジェクト


    ファイル構造
    |-- .next
|-- node_modules
|-- pages
|-- public
|-- styles
|-- .eslintrc.json
|-- .gitignore
|-- next-env.d.ts   <-- 추가 됨
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- tsconfig.json  <-- 추가 됨
    Next.js+Type ScriptプロジェクトはNextです.これはJSプロジェクトとよく似ています.
    私は違いだけを説明します.
  • .next
  • node_modules
  • pages
  • public
  • styles
  • .eslintrc.json
  • next.config.js
  • .gitignore
  • package-lock.json
  • package.json
  • README.md
    • 11日まで内容は同じです.
    相違点

  • next-env.d.ts
    --npm run devを実行すると自動的に作成されます.
    このファイルはNextです.TypeScriptコンパイラでjsタイプが選択されていることを確認します.
    削除はできませんが、編集はできます(必要ありません).
    -- Next.jsが推奨するTSにしたい場合はnext-env.d.tsの編集

  • tsconfig.json
    --npm run devを実行すると自動的に作成されます.
    -- Next.jsが推奨する設定ではなくTS設定をカスタマイズする場合は、tsconfigを使用します.jsonの編集
    • 12、13正式な文書を参照してください
    nextjs.org
    役に立ちますか?
    以上は真実だけにしよう開発の設定と作成例は次の記事で~
    お疲れ様でした.

    以上arenacast開発チーム
    Kurt
    システムテスト
    モダンJavaScript Day 12&13