━目次━




この記事はギルドワークス Advent Calendar 2019 24日目の記事です。

せっかくの機会なので投稿させて頂きました。

ギルドワークスさんとは今年から関わらせてもらっています。

プロダクト開発に関する視座や、リモートでのチーム開発のノウハウ、技術レベルの高い人達とのやりとり等、学ぶことが非常に多くやり甲斐があります。

今後とも宜しくお願いしますm(..)m

はじめに

この記事ではReactのフレームワークNext.jsについて簡単に紹介します。

Nuxtだけ使ったことのある人はそのReact版くらいに思ってもらえたら良いかと思います。

日本(アジア圏)ではVueユーザが優勢で使用者も多いですが、Reactイイデスヨーという思いも込めて、、、

※この記事ではインストール方法やHallowWorld!の出し方の手順等、公式ページ見てくださいみたいなのは特に書きません

余談ですが「Next.jsとNuxt.js」って調べた時のGoogleさんにはキレそうになります(‘ω’)

なんでNext使うの？

そもそもなんでNext使いたいの？って聞かれたら真っ先に思い浮かぶのはSSRしたいからっていうのと、ルーティングの煩雑さがなくなるからというのが思いつきます。(勿論それ以外にもメリットは色々ありますが…)

このあたりはNuxtも同じですね。

react-routerとかのルーティングライブラリは初めて使ったとき「めんどくせぇ」以外の感情がなかったです…

なのでReactで開発するならSSRの要件がなくてもルーティングのことを考えるだけでもNextを採用するメリットはあります。

更に2019年7月のNext.js 9へのメジャーバージョンアップでかなり推しポイントが増えました。

そのあたりを中心に紹介したいと思います。

Nextのオススメポイント

豊富なサンプルプロジェクト

これは直近のバージョンアップとは関係ないですが、Next.jsは公式のサンプルが豊富です。

2019年12月現在で実に218種類のサンプルプロジェクトがあります。

例(名前で大体分かるかと)

progressive-render
ssr-caching
with-aws-amplify
with-firebase-hosting-and-docker
with-storybook
etc…

セットで使いたいライブラリやミドルウェアを大体カバーしてくれているので、クローンしてきたものをベースに開発をスタートすることができます。
かなりスピード感がでる印象です。

デフォルトでTypeScript対応

「ちょっと意識高いプロジェクトがTypeScript使ってる…」というのはもう過去の話です。

それを体現するかのようにNext9からデフォルトでTypeScript対応となっています。

上記のサンプルから適当にクローンしてきたプロジェクトの.jsを.tsに変更して起動すると、

ご親切にnpm install –save-dev typescript @types/react @types/nodeしなよ〜て言ってくれるのでインストールし、再度起動すると、



「おっなんかTypeScript使いたいみたいやからtsconfig.json作っといたで！」



と気を使ってもらえ、これでTSが動きます。すごい！

APIルートの提供

API系のファイルの置き場やフォルダ構成ってチームで認識合わせるの最初面倒だったりしませんか。

もしくは、プロジェクトによってはバックエンドはまだ出来ていないのでフロントが先行してモックを動かしたい時とかあると思います。

そんな悩みを解決してくれるのがNext.jsのAPIルートの仕組みです。

pages/api配下が0コンフィグでエンドポイントとして設定されるというものです。

以下のサンプルコードを見てください。

pages/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import fetch from 'isomorphic-unfetch'
 
const Index = ({ posts }) => (
  <ul>
    {posts.map((post, i) => (
      <li key={i}>{post.title}</li>
    ))}
  </ul>
)
 
Index.getInitialProps = async () => {
  const response = await fetch('http://localhost:3000/api/posts')
  const posts = await response.json()
 
  return { posts }
}
 
export default Index
 



pages/api/post.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import micro from 'micro'
 
const posts = [
  {
    title: 'Next.js is awesome'
  },
  {
    title: 'API support is really great'
  }
]
 
export default micro((req, res) => {
  res.status(200).json(posts)
})
 


このようにapiフォルダ配下に置いたファイル名でそのままエンドポイントとして作用します。

reqとresはAPIでよく使用する要素をとれるようになっているので便利です。
reqの中
resの中

モック段階で固定のJSONを返しておけばバックエンド側もこのファイルを見れば想定している形が分かるのでコミュニケーションコストも下がります。フロントも最初からバンバン非同期の形で書いていけます👍

ダイナミックルーティング

これは結構面白いというか、特殊な仕組みです。

まずは以下のフォルダ構成とします。

components
　- header.js
pages
　- post
　　- [id]
　　　- [comment].js
　　　- index.js
　- about.js
　- index.js

フォルダ名やファイル名が[]で囲まれてるのが分かります。

これがダイナミックルーティングの印で、以下のようにas=””に実際の値を設定、useRouterを使うことでクエリを取り出すことができます。

header.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import Link from 'next/link'
 
const Header = () => (
  <header>
    <ul>
      <li>
        <Link href='/'>
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href='/about'>
          <a>About</a>
        </Link>
      </li>
      <li>
        <Link href='/post/[id]' as='/post/first'>
          <a>First Post</a>
        </Link>
      </li>
      <li>
        <Link href='/post/[id]' as='/post/second'>
          <a>Second Post</a>
        </Link>
      </li>
    </ul>
  </header>
)
 
export default Header
 


[id]配下のindex.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { useRouter } from 'next/router'
import Link from 'next/link'
import Header from '../../../components/header'
 
const Post = () => {
  const router = useRouter()
  const { id } = router.query
 
  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      <ul>
        <li>
          <Link href='/post/[id]/[comment]' as={`/post/${id}/first-comment`}>
            <a>First comment</a>
          </Link>
        </li>
        <li>
          <Link href='/post/[id]/[comment]' as={`/post/${id}/second-comment`}>
            <a>Second comment</a>
          </Link>
        </li>
      </ul>
    </>
  )
}
 
export default Post
 


なので、「この詳細ページのパーマネントリンクが欲しい！」といった要望がある時はこれで一瞬で対応可能です。

んー便利ですね。

ファイル名から即座にダイナミックルーティングを使用していることが想定できるのも割と良い気がします。

さいごに

以上、新機能を中心にNext.jsの魅了を紹介しました。

ReactとVueどちらも経験してみましたが、個人的にはやはりReactのほうが綺麗につくれる印象です。

特にHooksがでてからReactがノリにのってる感じはあります。

このようなアンケート結果を見るとHooksが出てReactが勢いを取り戻した感が見てとれます


まぁフロントは本当に技術の移り変わりが激しいので、何でもやりまっせ精神を常に持っていこうと思います！

それでは！良いお年を！！

最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
 　厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-