はじめに
会社のTeckポータル開発でNEXT.jsに触れる機会があったのですが、
0から開発したことなかったので、Next.jsのチュートリアルをやってみることにしました。
チュートリアルの学習備忘録です。
どのチュートリアル？
今回行うチュートリアルは、公式のNEXT.jsが公開しているチュートリアルです。
Next.jsとは？
Next.jsとは、公式に下記のように記載があります。
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
Next.jsは、高速なWebアプリケーションを作成するためのビルディングブロックを提供する柔軟なReactフレームワークです。
Next.jsの利点
利点について、公式に下記のように記載があります。
- Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
- You need to do production optimizations such as code splitting.
- You might want to statically pre-render some pages for performance and SEO. You might also want to use
server-side rendering or client-side rendering.- You might have to write some server-side code to connect your React app to your data store.
A framework can solve these problems.
Next.jsを使うと、下記のようなメリットがあるみたいです。SEOに強いっていいですねー
- BabelやWebpackの環境設定を行う必要がない
- Code splittingのような最適化の必要がない
- パフォーマンス、SEOのためのサーバーサイドレンダリング、クライアントサイドレンダリングの問題を解決できる
- Reactアプリをデータストアに接続するための、サーバー側のコードを簡単に実装できる
環境構築してみよう
Setup
NEXT.jsは、nodeのバージョンが10.13以上である必要があるため、versionを確認してみます。
If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.
$ node -v
v14.17.6
nodeのバージョンが10.13以上あったので次に進みます。
Create a Next.js app
サンプルプロジェクトを下記のコマンドで作成します。
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
作成したプロジェクトに入り、実行してみます。
$ cd nextjs-blog
$ npm run dev
実行するとhttp://localhost:3000/でローカルでサーバー立ち上がります。
起動まで簡単ですね。
Edit
試しに、pages/index.jsを開いて、「Welcome to」を「Learn」に変更してみます。
$ npm run devを実行した状態で保存すれば、自動的にコンパイルして画面変更してくれます。⇦地味に便利ですね。
The Next.js development server has Fast Refresh enabled. When you make changes to files, Next.js automatically applies the changes in the browser almost instantly. No refresh needed! This will help you iterate on your app quickly.
終わりに
最初のレッスンはここまでです。次はナビゲーションやページ間の移動なので、学習したらまとめていこうと思います。
参考