この記事について

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

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

pagesディレクトリ配下

このディレクトリは重要なので消してはだめ。
webサイトとかでページ遷移させたい時は、このディレクトリ配下にルーティングさせたいファイルを配置する。

pagesディレクトリ配下にあるapiディレクトリはどっちでもOK
名前の通りapi通信をする際に必要となる。今回、私はapiを使うため残しておく。
TODOアプリとかそのくらいなら不要なので削除してOK

pagesディレクトリ直下にある_app.tsxファイルは必須。
これは触れずにこのままにしましょう。
グローバルCSSを当てたり、グローバルstateを定義するときに必要です。
ざっくり言えば共通化に使われるようなファイルと思ってます。
違ったらすみません、、

pagesディレクトリ直下、_app.tsxの下にあるindex.tsxファイルは必須。
このファイルを開くと中にはさまざまな記述がされています。少し見てみます。

npm run devでアプリを起動するとWelecome to Next.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

こんなふうになります。

同じにならない、、という方はご安心ください。
次のステップで解消します。

stylesディレクトリ

stylesディレクトリ配下のHome.module.cssというファイルの中身を下記のように書き換えてセーブしてください。それ以外は全て削除でOKです。

/*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ディレクトリはそのまま

後書き

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

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