Next.jsのTips集

React.jsでアプリケーションをつくるためのフレームワークNext.jsのTipsを集めました。

TypeScriptでimportのaliasを設定する方法は?

Next.js + TypeScript の構成で webpack の alias を設定するにはプロジェクトのルートに下記のコードで next.config.js を作成します。

const withTypescript = require('@zeit/next-typescript')
const path = require('path')

module.exports = withTypescript({
  webpack(config, options) {
    config.resolve.alias['@'] = path.resolve(__dirname, './')

    return config
  }
})

これで Next.js に関する設定は OK なので後は tsconfig.json に下記を追加します。

{
  "baseUrl": ".",
  "paths": {
    "@/*": ["./*"]
  }
}

動的ページのURLのパラメーターをSSR時に取得

Next.js で動的なページを作る場合は pages ディレクトリ配下に[]を含んだファイル名でコンポーネントを作ります。
例えば/posts/:id のようなページを作るには下記のようにします。

pages
  | -- poost
         | -- [id].js

実際の URL は/posts/1 や/posts/2 のようになりますが、1 や 2 の部分を[id].jsで SSR 時に取得は getInitialProps の query でアクセスできます。

const Page = (props) => {
  return <div>{props.id}</div>
}

Page.getInitialProps = ({ query }) => {
  return {
    id: query.id
  }
}

Page 関数内では useRouter を使って取得しますが SSR 時は query オブジェクトから取得します。

このページをシェアする
  • ツイートする
  • シェアする

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。