export defaultが設定されているモジュールをasでimportする方法

公開日時

next/headを使うと、サイト共通で利用するmetaタグやtitleを一つのコンポーネントにまとめることができる。

カスタマイズしたHeadのコンポーネント名もHeadとしてexportしたいとなった時に、export defaultが設定されているモジュールをasでimportする方法が分からなかったので調べた。

以下のように[[import { default as XXXX } from]]とすることで別名が使えた。

import { default as NextHead } from 'next/head'
import React from 'react'

type Props = {
  title?: string
}

export const Head = ({ title }: Props) => {
  const defaultTitle = process.env.NEXT_PUBLIC_SITE_NAME

  return (
    <NextHead>
      <title>{title || defaultTitle}</title>
    </NextHead>
  )
}

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった