Next.js  ×  Typescript  初期ファイルってどうする？？

Next.jsとTypescriptで環境構築後、初期ファイル等の話です。
[環境構築の記事はこちら](https://qiita.com/s14101500383at/items/c8079f519edefd5ebe73)

備忘録です。

## この記事について
「よっしゃTODOアプリ作るで！」とアプリ立ち上げたはいいものの、
既にちょこちょこファイルがあり、どうすればいいのかわからないと徐々にモチベが低下。

そんな時、とりあえず難しい話は置いといて関係ないファイルすっきりさせて挑みたい几帳面で心配性な人向けです。では参ります。

## pagesディレクトリ配下
![スクリーンショット 2022-07-23 18.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/e5daa440-01e3-dc5f-a815-4f937c510db1.png)
このディレクトリは重要なので消してはだめ。
webサイトとかでページ遷移させたい時は、このディレクトリ配下にルーティングさせたいファイルを配置する。
![スクリーンショット 2022-07-23 18.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/fd35d467-847b-f222-1793-ac08e00d2610.png)
pagesディレクトリ配下にあるapiディレクトリはどっちでもOK
名前の通りapi通信をする際に必要となる。今回、私はapiを使うため残しておく。
TODOアプリとかそのくらいなら不要なので削除してOK

![スクリーンショット 2022-07-23 18.12.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/f4cc61af-669b-55e7-49a9-f3b2a1bd24f8.png)
`pages`ディレクトリ直下にある`_app.tsx`ファイルは必須。
これは触れずにこのままにしましょう。
グローバルCSSを当てたり、グローバルstateを定義するときに必要です。
ざっくり言えば共通化に使われるようなファイルと思ってます。
違ったらすみません、、
![スクリーンショット 2022-07-23 18.41.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/cc21c5aa-d36d-2cf9-befd-a7076fd60672.png)
pagesディレクトリ直下、`_app.tsx`の下にある`index.tsx`ファイルは必須。
このファイルを開くと中にはさまざまな記述がされています。少し見てみます。

![スクリーンショット 2022-07-23 18.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/3ca8827c-3e1b-08c8-3421-45448f1929f3.png)
`npm run dev`でアプリを起動すると`Welecome to Next.Js!`と青文字で表示されます。お気づきの通り、このファイルから画面が作られており、変更したり増やしたりできます。少し弄ります。下記を見て下さい。



```js
//index.tsx

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
//以下2つのimportは削除しても問題はない。
import Head from 'next/head'
import Image from 'next/image'

const Home: NextPage = () => {
  return (
  <div className={styles.main}>ニートになる前は不動産やってましたぜ</div>
  )
}
export default Home
```
こんなふうになります。
![スクリーンショット 2022-07-23 19.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/84bf6574-374b-befc-31d1-e98df06e8646.png)
同じにならない、、という方はご安心ください。
次のステップで解消します。

## stylesディレクトリ
![スクリーンショット 2022-07-23 23.26.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280802/e864bbbd-6b35-e7ea-409e-48bd5cfbd32c.png)
stylesディレクトリ配下の`Home.module.css`というファイルの中身を下記のように書き換えてセーブしてください。それ以外は全て削除でOKです。
```css
/*Home.module.css*/
.main {
  color: #0070f3;
  font-size: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 200px;
}

```
stlyesディレクトリ配下の`globals.css`は`_app.tsx`で使われています。
`Home.module.css`は`index.tsx`専用と考えてください。
同様にこれから開発で作成されるファイル毎にcssファイルを作成しスタイルを当てることができます。
今回、私はUIコンポーネントライブラリを使用するのでどちらも削除します。

## publicディレクトリ
このディレクトリは削除してはダメです。
中身の`favicon.ico`と`vercel.svg`は削除してOK。
この２つをクリックで表示してみると画像データ、画像urlです。
つまり、表示する画像はpublicディレクトリ配下に格納するルールがあります。
私はpublic配下に`imagesディレクトリ`を切ってそこに格納してます。

## srcディレクトリを追加
#### ①アプリファイル直下に`src`ディレクトリを作成。
なぜsrcかと言われれば作法みたいな感じです。
#### ②`src`ディレクトリ配下に`componets`ディレクトリを作成
pagesがルーティングに使われるファイルを格納し、
`components`はその用途で使われないファイルを入れる。ボタンとか。ヘッダー、フッターとか。
#### ③`src`ディレクトリ配下に`hooks`ディレクトリを作成
カスタムフックを入れる
#### ④`src`ディレクトリ配下に`provider`ディレクトリを作成
グローバルstateを入れる
#### ⑤`src`ディレクトリ配下に`types`ディレクトリを作成
typescriptは型を扱うので、複数のコンポーネントで使用される型なら１つのファイルに纏めるてこのディレクトリにぶちこみます。
#### ⑥`src`ディレクトリ配下に`pages`ディレクトリを移動
①で作法と書きましたが、こうすることで1つのファイルに書いたコードが集約されるので見やすいです。

#### ⑦styles,publicディレクトリはそのまま

## 後書き
お疲れ様でした。
ディレクトリ構成などは人それぞれですが、私はこんな感じにしといて、途中途中見やすさを考えて構成し直してます。

次回以降はライブラリー等のインストールをしていきます。