JavaScript
React
next.js

Next.jsを触るに当たり、必要そうな情報をまとめました。

(一部、公式ドキュメントの雰囲気和訳です)

メモ程度のものなので、ざっくりです。

学習しながら、随時更新していきます。

間違い等あれば、ご指摘いただけると幸いです。


静的なファイル

静的なファイルは static/ に配置します。


<head> の設定

import Head from 'next/head'

function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}

export default IndexPage


getInitialProps

ページがロードされたときにデータを取得します。pages/ ディレクトリでのみ使用でき、子コンポーネントでは使用できません。

初期ページロード時はサーバーサイドで実行され、 Link またはルーティングAPIを使用して別ルートに移動する際はクライアント上で実行されます。


受け取るコンテキストオブジェクト


  • pathname - URLのパスセクション

  • query - オブジェクトとして解析されたURLのクエリ文字列セクション

  • asPath- Stringブラウザに表示される実際のパス(クエリを含む)の

  • req - HTTP要求オブジェクト(サーバのみ)

  • res - HTTP応答オブジェクト(サーバのみ)

  • err - レンダリング中にエラーが発生した場合はエラーオブジェクト


ルーティング

pages/ 間を移動できます。

import Link from 'next/link'

function Home() {
return (
<div>
Click{' '}
<Link href="/about">
<a>here</a>
</Link>{' '}
to read more
</div>
)
}

export default Home

<Link> コンポーネントには2つの主な属性があります。


  • href:pages/ ディレクトリ内のパスとクエリ文字列

  • as:ブラウザのURLバーに表示されるパス。

<Link href="/post?slug=something" as="/post/something">

プロダクションのみの機能ですが、 prefetch 属性をつけるとページをプリフェッチします。


動的インポート

Next.jsは、JavaScript用のTC39動的インポート提案をサポートしています。これにより、JavaScriptモジュール(React Componentsを含む)を動的にインポートしてそれらを使用できます。

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

function Home() {
return (
<div>
<Header />
<DynamicComponent />
<p>HOME PAGE is here!</p>
</div>
)
}

export default Home


<App> のカスタマイズ

./pages/_app.js を作成することによって、 <App> を上書きできます。

import React from 'react'

import App, { Container } from 'next/app'

class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {}

if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}

return { pageProps }
}

render() {
const { Component, pageProps } = this.props

return (
<Container>
<Component {...pageProps} />
</Container>
)
}
}

export default MyApp


<Document> のカスタマイズ

./pages/_document.js を作成することにより、ベースのマークアップを上書きできます。

// _document is only rendered on the server side and not on the client side

// Event handlers like onClick can't be added to this file

// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}

render() {
return (
<Html>
<Head>
<style>{`body { margin: 0 } /* custom! */`}</style>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument


エラーページのカスタマイズ

pages/_error.js を作成することにより、 404 または 500 エラーの上書きができます。

import React from 'react'

class Error extends React.Component {
static getInitialProps({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : null
return { statusCode }
}

render() {
return (
<p>
{this.props.statusCode
? `An error ${this.props.statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}
}

export default Error


next.config.jsによるNext.jsのカスタマイズ

next.config.js により、webpackの設定等をカスタマイズできます。

// next.config.js

module.exports = {
/* config options here */
};

もしくは、

module.exports = (phase, { defaultConfig }) => {

return {
/* config options here */
};
};

その他、詳しくは公式ドキュメントを参照。

https://nextjs.org/docs