2019.06.29

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

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

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

> Next.js 8からの変更点Next.js 8からの変更点

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

> 型の使用例型の使用例

> Page ComponentPage 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)Page Component (class component)

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

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

  render {
    return <div/>
  }
)

> Page Component w/ routerPage 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)

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

2023/04/30

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

2018/05/30netlify

dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数（4つ）の貢献を行った人に特典がプレゼントされるものになっています。自分はドキュメ

2022/11/02