Next.js+Type Scriptページの作成

この内容はnextです.jsとnextjs.+比較typescriptの学習に使用
以下のようにして、基本的な設定とnextJS+typescriptの開発を学びます.
下一篇文章:Next.js+TypeScript 2の起動
この記事では、プロジェクトでページを作成して検証します.
今回の内容はネクストjsプロジェクトと次のステップ.js+Type Scriptプロジェクトは同じです.
.js, .tsxファイル拡張子を除いて、何の違いもありません.
準備作業

プロジェクトのページフォルダを開きます.

フォルダで作成したすべてのファイルを消去します.

Next.jsプロジェクトはindexです.js

Next.js+Type Scriptプロジェクトはindexです.tsxを作成します.

index.js

export default function home () {
    return "hi kurt~"
}

or
index.tsx

export default function home () {
    return "hi kurt~ TS"
}

上記の内容に従ってファイルを作成し、ブラウザで検証します.

重要な説明

next.jsではpagesフォルダにルータの機能があります.

ファイル名は「アドレス」ウィンドウパスです!

例:プロジェクトページフォルダのabout.jsの作成
about.js

export default function about () {
    return "love is chikin samgetang~~"
}

or
about.tsx

export default function about () {
    return "love is samgetang chikin~ TS"
}

「アドレス」ウィンドウ
http://localhost:3000/about
http://localhost:3001/about
クリックして確認してください.

reactを開発した人なら知っているでしょう?
上記のように
react-router-domインストールNO!
next.jsでは、ルータがページフォルダでサポートされていることがわかります.
一度も反応したことがない方は参考にしてください.
react-router-domを検索すると役立ちます.
next.jsがどれだけ便利なのか知っているかもしれません.
参考url(chromeでハングルに訳してください)
https://v5.reactrouter.com/web/guides/quick-start
https://reactrouter.com/docs/en/v6/getting-started/tutorial
重要な情報とヒント

pagesファイル名は「アドレス」ウィンドウパスです!

で生成されたファイル内でdefault function XXX()<--関数名をエクスポートするには、任意の名前

を使用できます.
ファイルには、

ではなくexport defaultを指定する必要があります.

export defaultについては、コンセプトを学ばなければなりません!?おすすめです.
参照:义齿2

追加チップ
わざとミスを起こすわ
about.jsで
Errorをdefaultセクションに追加します.

export defaultError function about () {
    return "love is chikin samgetang~~"
}

ブラウザ画面では、エラーの部分が^^表示に指定され、すぐに表示されます.Good!

コマンド入力ウィンドウまたはvscode端末で表示することもできます.

もう一つ.
「アドレス」ウィンドウ
http://localhost:3000/testと書いてください

見えますか?知らなかったら.
作成されていない404ページが表示されます.
react開発の場合、404ページを別途作成する必要があります.
でもnextjsは内蔵機能を提供しています.
このページはここまでです.
重要な情報とヒント
もう一度見て、それを適用していろいろなテストを行うことをお勧めします.
あまり深く言わないでポイントだけGogo~
そうやってついていくんですよね~そうですね~~

以上arenacast開発チーム
Kurt