━目次━



2019年7月8日にNext.jsバージョン9.0がリリースされました！！

で、何やら見ていると、


APIのモックが簡単に作れる
ダイナミックルーティングが超簡単に
デフォルトでTypeScriptをサポート


とかとか、、、


え、やばない！？




ということでさっそく試してみました！

Next.js 9.0新機能デモ

以下３つの機能が個人的に今回のアップデートの目玉かなと思うので、それらについて試します。

今回試すもの

APIのモック作成
ダイナミックルーティング
TypeScript

その他詳細はこちら

事前準備

create-next-appが新機能にも追従してくれてるようなのでこちらを使用します。

インストールしていない人はしておきましょう。

npm install -g create-next-app

APIモックの作成

適当なフォルダに移動し、以下のコマンドを実行します。

create-next-app –example api-routes-micro api-routes-sample

api-routes-sampleという名前でプロジェクトが作成されるので、移動して起動しましょう。

cd api-routes-sample
npm run dev

http://localhost:3000/にアクセスすると以下のような画面が表示されるはずです。




なんとこの表示されている文字が既にAPI取得された結果です。

ファルダ構成は

pages
　- api
　　- post.js
　- index.js

という感じで、コードを見てみると

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
 



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モックの作成ができてしまうことが分かる。(jsonサーバーとか使わなくて良い…っ!)

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

再度別の適当なフォルダに移動し、以下のコマンドを実行します。

create-next-app –example dynamic-routing dynamic-routing-sample

dynamic-routing-sampleという名前でプロジェクトが作成されるので、移動して起動しましょう。

cd dynamic-routing-sample
npm run dev

http://localhost:3000/にアクセスすると以下のような画面が表示されるはずです。

各リンクを押下した際の挙動とURLの変化を確認しましょう。

ファルダ構成は

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

という感じで、コードを見てみると

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
 


index.js

1
2
3
4
5
6
7
8
9
10
11
import Header from '../components/header'
 
const Home = () => (
  <>
    <Header />
    <h1>Hello World!</h1>
  </>
)
 
export default Home
 


[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
 


[comment].js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.js" ]import { useRouter } from 'next/router'
import Header from '../../../components/header'
 
const Comment = () => {
  const router = useRouter()
  const { id, comment } = router.query
 
  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      <h1>Comment: {comment}</h1>
    </>
  )
}
 
export default Comment
 



[]で囲む部分がダイナミックルーティングの制御箇所とみなされ、queryに渡される感じですね。

フォルダ名やファイル名に[]を付けるのは見慣れないですが、これはこれで一目で分かってありですね！

TypeScriptの使用

デフォルトでTypeScriptに対応しているとのことなので、先ほどの[id]フォルダ配下のindex.jsをindex.tsxに変換して再度npm run devしてみました。

すると以下のようなエラーが

ご親切にnpm install –save-dev typescript @types/react @types/nodeしなよ〜て言ってくれていますので言われるがままに

npm install –save-dev typescript @types/react @types/node

再度npm run devすると、




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


とな！

なんという親切！ありがとうNextおじちゃん！！

上記で正常に起動でき、瞬殺でTypeScriptも使えるようになりました。

さいごに



めちゃめちゃ良くないっすか？？？



これだけでもReactを勧める理由になりそう←

というかNextの9になる前に触り始めといて良かった、、、こういう感動は大事にしたい。

それでは！また！！

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