2018年4月23日

プログラミング

Next.jsの環境構築【これからはじめるNext.js】

目次

  1. はじめに
  2. Next.jsとは
  3. 環境構築
  4. まとめ

はじめに

Next.jsはReactでサーバサイドレンダリングを可能とするフレームワークです。
同じような考えで開発されている、Vue.jsで作られているNuxt.jsも有名ですね。

balgeeではReactを実際に使ってサービスを作っていくシリーズもあります。

Reactでスマートスピーカーのコマンド発音サービスを作ろう(1)【作りながら覚えるReact】

このシリーズではNext.jsの基本を解説しながら、実際にサンプルのWebサービスを作っていきます。

Next.jsとは

では、まずNext.jsとは何者なのかを解説していきます。
Next.jsはZEIT, Incにより開発されたフレームワークです。
ZEITは簡単にサービスをホスティング、デプロイできるNowというサービスを展開している会社です。

公式GitHubによると以下のように書いてあります。

Next.js is a minimalistic framework for server-rendered React applications.

簡単に言ってしまうと、Reactアプリケーションをサーバサイドレンダリングする為の軽量なフレームワークです。

サーバサイドレンダリングとは

JavaScriptは基本的にページのレンダリング(表示)時に実行されます。
その為、ページの大部分をJavaScriptに頼っていたり、ReactなどでSPA(Single Page Application)のような形態になっていると、そのページを初回に開くときに多く時間がかかってしまうようになります。

また、GoogleのクローラはJavaScriptを読み込み、その結果を評価することもできますが、それも100%ではありません。その為、コンテンツを全て伝えきれない(JavaScript側のレンダリングが全て終わっていない)状態でGoogleが評価する為、検索エンジンの評価として正しく評価されない可能性もあり、「SPAはSEOに弱い」と言われることもあります。

こういったSEOやパフォーマンスの観点から、ページをレンダリングする前にJavaScriptの処理をサーバ側で行ってしまい、ページをレンダリングすることをサーバサイドレンダリングと呼びます。つまりページをレンダリングするときには全てJavaScript側の処理が終わっている、ということですね。

環境構築

では、公式ページにそって環境構築をしていきましょう。

土台となるReactのアプリを作っていきます。
mkdir next-sample
cd next-sample

次にnpm moduleの初期化を行います。
npm init -y

そしてNext.jsをインストールします。
npm install --save next react react-dom

また、devでのコマンドで動かせるようにする為、以下をpackage.jsonに追加します。

{
  "scripts": {
    "dev": "next"
  }
}

次に、Next.jsではpagesディレクトリ配下のファイルを使用していくので、pagesを作ります。
mkdir pages
また中にはindex.jsがあると、そちらがルートとして読み込まれますので、サンプルコードを書いていきます。
vi pages/index.js

export default () => <div>Welcome to next.js!</div>

単純にWelcomeメッセージを表示させています。

ここまでできたら動かしてみましょう。
npm run dev

こちらにアクセスします。
http://localhost:3000/

他のアプリケーションなどで使っていて他のポートを指定したい場合にはこのような形で任意のポートを指定してください。
npm run dev — -p port_num.

すると、このような画面になります。
 2018-04-23 1.37.01.png (6.5 kB)

これで一旦の環境構築は完了です!

まとめ

今回はサーバサイドレンダリングのお話や、Next.jsの簡単な概要、そして環境構築をしました。
次回以降で実際にロジックを組んでいきますのでお楽しみに!

2

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP