👶
公式ドキュメントから学ぶNext.js〜環境構築〜
はじめに
ご覧いただきありがとうございます。mocです。
普段はバックエンドエンジニアですが、フロント周りもできるようになりたい！ということでNext.jsを触ってみます。
特別な理由があるわけではありません。
最近お話ししたエンジニアの人がReact楽しい！って言ってて、「React webアプリケーション」とかでググったら、目についたのがNext.jsだった、ただそれだけです。
なので、本記事は初学者である私が手を動かしながら、「へぇー」と思ったことを残したり、理解を深めるために言語化してみたりすることを目的としています。
今回の内容
公式ドキュメントをみながら環境構築をしていきます。
見た感じでは、秒で終わりそう、すごい。と思いながらやっていきます。
プロジェクトの作成
まずは、プロジェクトを作成します。
$ yarn create next-app --typescript
プロジェクトの名前を聞かれるので、任意の名前をつけてあげます。
ここでは、my-appとします。
ディレクトリ構成は下記のようになります。
（treeコマンドは別途インストールしています。）
$ cd my-app
$ tree -a -I "node_modules|.git|.next"
.
├── .eslintrc.json
├── .gitignore
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── _app.tsx
│ ├── about.tsx
│ ├── api
│ │ └── hello.ts
│ └── index.tsx
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
├── tsconfig.json
└── yarn.lock
画面起動
開発用サーバを起動してみます。
$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 146 ms (125 modules)
起動できたら、お好みのブラウザで下記URLにアクセスしてみましょう。
↓のような画面が表示されたらOKです。
え、もう終わった、すごい。
まとめ
想像以上に簡単でした。
ディレクトリ構成眺めていろいろ深掘りしようと思いましたが、ちょっと時間かかりそうなので、必要なタイミングで少しずつ理解を深めていければなーと思います。
次は、こちらを見ていこうかと思います！
Discussion