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

この内容はnextです.jsとnextjs.+比較typescriptの学習に使用
以下のようにして、基本的な設定とnextJS+typescriptの開発を学びます.
下一篇文章:Next.js+Type Scriptページの作成
Next.jsはとても感謝して面白いフレームワークで、多くの不便を解消しました.
Typeスクリプトは、コードの安定性を確保するための魅力的な言語です.
どうしてですか.原因をこの文章に書きたいです.
なるべく简単にできるかどうかはわかりませんが….😅😅😅
準備作業

Next.jsプロジェクトと

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

各

の最上位フォルダには

があります.

コンポーネントフォルダと

を作成

menu.jsファイル

の作成
/component/menu.js
or
/component/menu.tsx

import Link from "next/link";

export default function Menu () {
    return (    
        <nav>
            <Link href="/">
                <a>home</a>
            </Link>
            <Link href="/about">
                <a>about</a>
            </Link> 
        </nav>
        // <nav>
        //     <a href="/">home</a>
        //     <a href="/about">about</a>
        // </nav>
    )
}

次に、次のように既存のインデックスファイルを変更します.
/pages/index.js

import Menu from "../component/menu";

export default function home () {
    return (
        <div>
            <Menu />
            <div>hi kurt~</div>
        </div>
    )
}

or
/pages/index.tsx

import Menu from "../component/menu"

export default function home () {
    return (
        <div>    
            <Menu />        
            <div> hi kurt~ TS</div>
        </div>
    )
}

同様に、次のように既存のaboutファイルを変更することもできます.
/pages/about.js

import Menu from "../component/menu"

export default function about () {
    return (
        <div>
            <Menu />
            <div>love is chikin samgetang~~</div>
        </div>
    ) 
}

or
/pages/about.tsx

import Menu from "../component/menu"

export default function about () {
    return (
        <div>
            <Menu />
            <div>love is samgyetang chikin~ TS</div>
        </div>
    ) 
}

ここまでやったのは間違いないですか?
エラーが発生した場合は、上記のソースを直接コピーしてctrl+c ctrl+vを貼り付けます.
皆さんに3つお伝えします

1. next.メリット

- link 의 속도와 편리함

各アイテムの最初の画面を表示し、メニューをクリックします.
よくなるよ.
では、ソースコードを修正します.
/component/menu.js
or
/component/menu.tsx

import Link from "next/link";

export default function Menu () {
    return (    
        //<nav>
        //    <Link href="/">
        //        <a>home</a>
        //    </Link>
        //    <Link href="/about">
        //        <a>about</a>
        //    </Link> 
        //</nav>
        <nav>
             <a href="/">home</a>
             <a href="/about">about</a>
        </nav>
    )
}

既存のソースを注釈し、次のセクションを注釈解除します.
ブラウザ画面を確認します.
aタグを使用して画面移動を行うと、ブラウザがリフレッシュされ、画面のロード速度が遅くなります.
では、ソースを元に戻して、画面をクリックします.
想像以上に違いを感じる感じられるかな?
画面をリフレッシュせずに切り替えます.
現在よりも多くのソースとコンテンツを考慮します.
aタグを移動するよりも、前のリンクを使用する方が有利で、より速くなります.
linkを使用する際の注意点

 	<Link href="/"  className="test" id="kurt1" onClick={() => linkClick()} >
 		<a>home</a>
    </Link> // href  외는 적용 안 됨 
	
    <Link href="/"> // href 만 사용 가능
 		<a className="test" id="kurt1" onClick={() => linkClick()}>home</a>
    </Link> // href외에는 모두 a태그에 적용 해야 함 

2.typescript安定性

大文字と小文字の制限

Next.js+TypeScriptプロジェクトを作成するときに違いがあります.
参考:前の記事Next.js+TypeScript 2の起動
tsconfigです.jsonファイル.
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true, //대소문자 다를때 구분
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

tsconfig.jsonはtypescript Compileに関する設定ファイルです.
tsconfig.jsonは設定がたくさんありますが、今日は1つだけ紹介します.
必要に応じて、問題が発生したときに残りの内容を説明します.
関連記事:tsconfig.json
ここで、ConsistentCassingInFileNamesを強制する
同じファイルへの不一致参照を許可するかどうかを設定します.
大文字と小文字を区別する.
テストしてみます
既存
/component/menu.tsxの名前を変更します.
/component/Menu.変更をtsx大文字に保存します.
変更後、Vscodeに次のウィンドウが表示されます.

「いいえ」をクリックします.
次のブラウザ画面を確認すると、正常に動作します.
しかし、実際には、通常の画面では現れない状況です.
僕らはMenuだからtsxを大文字に変更
tsconfig.json設定で大文字と小文字を区別できます.
では確認してみます
/pages/index.tsx

import Menu from "../component/menu" <-- menu를 대문자로 Menu 변경 

export default function home () {
    return (
        <div>    
            <Menu />
            <div> hi kurt~ TS</div>
        </div>
    )
}

変更および保存中にエラーが発生しました.
実際のファイルも大文字に変更されました.
importセクションでは、実際のファイルの大文字に変更しますが、次のエラーが発生します.

どうしてですか.TypeScriptプロジェクトでは、
tsconfig.これは、jsonファイルを使用してforceConsistentCassingInFileNameの大文字を解析する必要があるため、エラーですが、内部の大文字は変更されていません.
内部キャッシュはまだありませんか?または、メモリにファイルを小文字で格納します.
エラーが表示されたら、
すでに含まれている「d:/遊牧/nextjs-typescript/component/menu」.tsx「ファイル名」d:/遊牧/nextjs-typescript/component/menu.tsx"のみファイル名と大文字と小文字が異なります.
ファイルがプログラムに存在する理由は次のとおりです.
こうして出てきた
変更されたファイルが内部に適用されていないため、tsconfig.json設定で
ファイルは小文字なのにどうして大文字なの?
どうすればいいの?
/component/Menu.tsxを
/component/Menutest.tsxに変更後
Menutest.「インポートtsxの更新」ウィンドウが表示されたら、「はい」をクリックします.
開いているすべてのファイルを保存します.
再/component/minu.tsxに戻った後
Menu.「インポートtsxの更新」ウィンドウが再度表示されたら、「はい」をクリックします.
開いているすべてのファイルを保存します.
これにより、画面上のエラーが解消されます.
キー(Key)
同じ名前を大文字または小文字に変更した場合は、読み込みの更新(Update Import)ウィンドウで名前を保存できます.
エラーが発生しました.変更を安全に行うには、まったく異なるファイル名の後にファイルの名前を変更し直す必要があります.

3.お年玉tip

vscodeから

に自動インポート
vscodeでMarketplaceで自動Importを検索します.
Auto Import
インストール後
必要なファイルに、インポートするファイルのファイル名を入力します.
ファイル名
選択すると、上部にimportが自動的に追加されます.

ファイルの場所をブラウズしたり書き込んだりすることなく、自動的に追加されます.
/>そしてファイルを閉じると終了です.
ああ...ああ...
今日の文章はちょっと长いでしょう.もう少し補強して帰ってきます.
以上arenacast開発チーム
Kurt
いいですよ.みんなやってるでしょ?