Next.js+TypeScript 2の起動

この内容は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