--- title: "Next.jsで簡単に遊んでみた方法と感想" canonical_url: "https://olein-design.com/blog/first-touch-of-next-js" language: "ja" date_published: "2022-08-23T11:37:53+09:00" date_modified: "2022-08-23T11:37:53+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "備忘録" --- # Next.jsで簡単に遊んでみた方法と感想 みなさん、[Next.js](https://nextjs.org/)（ねくすとじぇーえす）ってご存知ですか？Web制作に関係する情報を見聞きしている人であれば、[React](https://ja.reactjs.org/)（りあくと）というのは聞いたことがある方も多いのではないでしょうか。 その[React](https://ja.reactjs.org/)を活用して、より手軽に開発を行えるようにしたフレームワークの一つが [Next.js](https://nextjs.org/) になります。 また、似た名前で[Nuxt.js](https://nuxtjs.org/ja/)（なくすとじぇーえす）というフレームワークもあるのですが、こちらはReactベースのフレームワークではなく、[Vue.js](https://jp.vuejs.org/index.html)（びゅーじぇーえす）のフレームワークとなります。 こちらの記事では、上記のNext.jsを使って遊んでみた方法と感想をご紹介します。また、同じようにコマンド等を入力していけば同様に試していただけるかと思いますので、よかったらご一緒ください！ ## なぜNext.jsを試そうと思ったのか 以前から存在自体は知っていたのですが、なかなか試すタイミングがありませんでした。そして、正直あんまりよく分かっていませんでした…。 しかし、Webに関するすぐ近くの将来ではなく、少し遠くの将来を考えると、今のままということもあり得ず、新しい技術の到来と共にさらに環境は変わっていきます。 そして、それと同じくして、利用する人・活用する人側も変化していきます。ですので、そういった様々な環境や要因が渦巻いた先に未来が見えてくるのでしょう。 そう考えると、興味を持った技術に関しては、多少なりとも触ってみて感触を得ておくことは、何かしらプロジェクトに参加したりする際に、あると良い経験になると思います。ですので、こういった知的好奇心が湧いた際には、どこかのタイミングで色々と触っていきたいと考えています。 そして、そのタイミングがやってきたという感じですね。 ## どんな風に活用できそうか 僕はフリーランスですので、正直なところ依頼を受ける案件というのは、それほど大きなものはありません。 Next.jsはHeadless CMSなどと併用して利用されることも多いですが、予算規模なども考えると、その辺りのご依頼も少ないだろうなと考えています。 しかし、技術としてはとても素敵なNext.jsです。後述しますが、とても簡単にウェブサイトを構築していくことができますし、動的な処理もJavaScriptで行えます。 少し工数を減らすことができるくらい、僕自身がスキルを習得することで、安価に高速なウェブサイトを提供することが可能になるかもしれません。ないかもしれません（笑）。 ですので、まず個人的な関わり方としては、 - 静的サイト（お問い合わせフォームくらいは機能を持つビジネスサイト的な） - microCMSなどを使った簡易的なお知らせ投稿ができるビジネスサイト などが提供できるようになれると良いなと考えています。まだまだ精進が必要です。 ## 実際にNext.jsを試してみる 基本的に環境構築はコマンドラインを利用します。僕は NPM を使っていますが yarn でも可能です。最近では yarn の方が多いのかな？また、Node.jsも必要なので用意が必要です。 [埋め込みコンテンツ](https://nodejs.org/ja/) [埋め込みコンテンツ](https://www.npmjs.com/) こちらの環境では以下のようになっています。 - npm : 8.15.1 - node.js : 14.18.1 それぞれ、 ``` $ npm --version ``` ``` $ node --version ``` などで調べてみましょう。 あとは公式のドキュメントに従っていくだけなのですが、一通り流れを記しておきます。 ``` $ npx create-next-app@latest ``` するとプロジェクトのディレクトリ名を何にするかと聞かれるので、好きな名前を入力して進むとセットアップ完了です。 ``` $ npx create-next-app@latest --typescript ``` とオプションをつけることで、JavaScript ベースで記述されている形から TypeScript で記述されているプロジェクトを最初から立ち上げることも可能です。 環境が作れたら以下のコマンドを入力してみてください。 ``` $ npm run dev ``` こうすることで開発環境が立ち上がります。サーバーが立ち上がり `http://localhost:3000/` にアクセスすることで実際に表示を確認することができます。 この環境自体、ライブリロードなどが効いている状態なので、コードを修正し保存するだけで自動的に変更が反映されます。何かしらエラーがある場合にはアラートが表示されます。 正直、この環境を毎度ゼロから作るのは面倒なので、これだけでも恩恵を感じてしまいます。 では実際に VS Code などで内部を見てみましょう。 Next.js ではページの構造は全て `/page` ディレクトリの中で管理されます。ですので、上記のサーバーを立ち上げて最初に表示されているページは、`/page/index.js` のファイルが表示されているということになります。 仮に `/page/about.js` というファイルを複製して用意してみると、`http://localhost:3000/about` とアクセスすることでページが用意されていることが確認できます。 `/page` をルートとしてディレクトリ構造をわかりやすく作ってくれるのでとても便利です。これをReactで作ろうと思ったらコマンド一つでは当然できません。これだけでも便利です。（本意ではないけど） ## 今後の展望 上でも書きましたが、主に静的なサイトにはNext.jsはかなり強力だと感じています。 お仕事の多くを WordPress と共にしている身としては、サーバーサイドレンダリングではないことだけで、ページ表示スピードにびっくりしてしまいます。 また、表示速度を早くするために様々な工夫が用意されており、便利に使うことで比較的簡単に開発を進めることができます。 今後としては、 - サイト内コンテンツをJSONで持たせて管理する（これはほぼできる） - microCMSなどでライトな情報発信（ビジネスサイトでいうお知らせのような）ができる仕組みを導入する手段を把握する - GraphQLを使ってWordPressをHeadless CMSとして利用する方法の把握 この辺りを楽しんでみようと思います。 ## おまけ：参考になった動画 以下、英語ですが参考になった動画を貼り付けておきます。見ているとなんとなく言っていることがわかる程度にそれほど難しい英語ではないので、よかったら見てみてください。 [埋め込みコンテンツ](https://www.youtube.com/watch?v=pjhjqUrG9O4) [埋め込みコンテンツ](https://www.youtube.com/watch?v=tXAdHjQJf0Y) [埋め込みコンテンツ](https://www.youtube.com/watch?v=BSoRXk1FIw8) [埋め込みコンテンツ](https://www.youtube.com/watch?v=iJ_MiYEgDiM)