Next.jsとTypescriptで環境構築後、初期ファイル等の話です。
環境構築の記事はこちら
備忘録です。
この記事について
「よっしゃ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ディレクトリはそのまま
後書き
お疲れ様でした。
ディレクトリ構成などは人それぞれですが、私はこんな感じにしといて、途中途中見やすさを考えて構成し直してます。
次回以降はライブラリー等のインストールをしていきます。