mottox2 blog

Next.js 9からTypeScriptの利用方法が変わるのでまとめてみた

dev

ZEIT社が開発しているReact製のフレームワークNext.jsですが、現在v.8.1.1のカナリー版がリリースされています。
v.9では様々な変更が入っていますが、個人的に注目しているのはTypeScriptが標準で利用可能になった点です。そこで備忘録を兼ねて型の書き方を整理してみました。

カナリー版の段階で書いた記事を更新しました。

Next.js 8からの変更点

  • TypeScriptを利用するためにwebpackの設定を行う@zeit/next-typescript パッケージが不要になりました。
    • このパッケージはnext.config.js内で利用しwebpackとbabelの設定を弄る役割を担っていました。内部にビルドインになりました。
  • 型定義は@types/nextのものを使っていましたが、next.jsの本体側で型定義を持つようになりました。
  • ForkTsCheckerWebpackPluginがデフォルトで有効になっています
    • 雑な型を書いていると既存のプロジェクトを上げる際にエラーになり、ビルドでコケるようになります。
  • つまり、v9からはnextだけインストールすればTypeScriptが利用できるようになります。
関連Pull Request

Add Typescript compilation by timneutkens · Pull Request #7110 · zeit/next.js
Add automatic TypeScript setup by ijjk · Pull Request #7125 · zeit/next.js
Add .d.ts for next-server by timneutkens · Pull Request #7133 · zeit/next.js
Add declaration files by lfades · Pull Request #7118 · zeit/next.js
Add types for getInitialProps by lfades · Pull Request #7162 · zeit/next.js

型の使用例

Page Component

pages/以下に配置するとルーティングと対応するコンポーネントの例です。

pages/index.tsx
import  { NextPage } from 'next'

interface Props {
  books: Book[]
}

const Index : NextPage<Props> = () => {
  return <div>
    <p>Hello World</p>
  </div>
}

index.getInitialProps = async ({req}) => {
  // do something
}

Page Component (class component)

Hooks以前のクラスコンポーネントでの書き方

tsx
class Index extends React.Component<Props> {
  static getInitialProps = async ({ query }: NextPageContext) => {
  }

  render {
    return <div/>
  }
)

Page Component w/ router

withRouterを使ってコンポーネント内でルーターを触るパターンです。

pages/index.tsx
import  { NextPage } from 'next'
import { withRouter } from 'next/router'
import { WithRouterProps } from 'next/dist/client/with-router'

interface Props {
  books: Book[]
}

const Index : NextPage<WithRouterProps & Props> = () => {
  return <div>
    <p>Hello World</p>
  </div>
}

index.getInitialProps = async ({req}) => {
  // do something
}

export default withRouter(Index)
B!
dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
Copyright © 2019 @mottox2 All Rights Reserved.