Next.jsの環境構築とメリット

1 min読了の目安(約700字TECH技術記事

参考

vercel社が提供するNext.js公式チュートリアル引用でございます。まるパクリです。
また、YouTubeで発信されているトラハックさんの動画がNext.jsを学習する上でめちゃくちゃ分かりやすかったです!!
誠に勝手ながら紹介させていただきました。

Next.jsで環境構築を行うメリット

1.Babel+Webpackの複雑な環境設定が不要
2.Code Splittingのような最適化設定が不要
3.パフォーマンスやSEOのためのpre-render設定が不要
4.Renderingのタイミングを選択できる(CSR,SSR,SSG)
5.サーバーサイドの処理(api)を簡単に実装できる

Next.js環境構築

※注意

  • Windowsの方はUnixコマンドを使えるgit bashを用いてください
  • nodeが入っている前提です
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

succesfully!でプロジェクトができたら、

$ cd nextjs-blog(プロジェクト名)
$ npm run dev

ローカルサーバーを立ち上げ
http://localhost:3000/
を開く

終わりに

Next.jsのコミュニティは活発でアップデートも盛んなところが面白い!!