//tips
//smart contract
昨日作成してみたmuiの表示に_app.jsや_document.jsの機能を追加しながら、どうなっているのかを確認していく。
_appは複数ページに同様な表示を反映させていくのに役立つことはわかるが、その他がどのように影響を与えるのかがわかっていない。
この点をまず探る必要がある。
https://dev.to/hajhosein/nextjs-mui-v5-tutorial-2k35
theme部分はlightモードとdarkモードの切り替えなどで、わざわざコンポーネントにしなくて良さそうに感じてしまうが、これはThemeProvider componentに渡し、構造的にみやすいプロジェクトにしたいため別途作成しているよう。
later we need to pass a theme to ThemeProvider component of MUI and the reason that I am put everything in a separate file is that I want to structure files and folders properly from the beginning.
最新版では別途cache コンポーネントを作成する必要があるよう。
need to create a cache for your styles because you are using Next.js and this will help the app to figure out what style to apply.
_app.js のなかにこれらのコンポーネントをimportし、表示の枠組みを作れる。
import { CacheProvider } from '@emotion/react';
import { ThemeProvider, CssBaseline } from '@mui/material';
return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={lightTheme}>
<CssBaseline />
<Component {...pageProps} />
_document.jsを作成するのはgetInitialPropsの受け渡したのためのようで、これはemotion機能を使用するために必要になったよう。
Emotion は生産性と柔軟性の高い CSS in JS ライブラリでスクリプトの中にcssを書きやすくしてくれるものらしい。
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
// This is important. It prevents emotion to render invalid HTML.
// See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
参考：
https://qiita.com/Sotq_17/items/91760691081db50b1f03
https://qiita.com/__sakito__/items/d240840eef7123f62acf
今のところあまり必要性を感じないのだが、emotionを使用するために刷新した方がいいのだろうか。
コードで全体像を確認していく。
import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import ProTip from '../src/ProTip';
import Link from '../src/Link';
import Copyright from '../src/Copyright';
export default function Index() {
return (
<Container maxWidth="sm">
//bootstrapではサイズの説明があったが記載がなかったので調べていたらやっと見つかった。
//960以下600以上と認識
<Box sx={{ my: 4 }}>
//sxのなかにcssルールを記載することができる。
//myはmargin-top, margin-bottomにマージン設定
<Typography variant="h4" component="h1" gutterBottom>
Next.js example
</Typography>
<Link href="/about" color="secondary">
Go to the about page
</Link>
///aboutへの遷移
//srcフォルダの中にlinkの仕組みは格納されている
//下記も同じく
<ProTip />
<Copyright />
</Box>
</Container>
);
}
Index.jsの中身はシンプル。pageにはルート機能があるのになぜリンクが必要なのかはいまいちわからない。クライアントサイドの処理だから全部クライアント側で完結させられるようにするからだろうか。
イベントで表示させるのはダメなのだろうか。
ここは確認したいところ。
_app.jsの中身を確認。
import * as React from 'react';
import PropTypes from 'prop-types';
PropTypesとは、コンポーネントに渡ってきた引数をチェックするモジュール。PropsTypesでコンポーネントに渡ってきた引数をチェックできる。
例えばこのように
Comp.propTypes = {
//文字列で必須引数
message: PropTypes.string.isRequired,
}
他にも、PropTypes.element を使うことで、コンポーネントに単一の子要素しか渡せないことを指定することができる。
React.PropTypesがReact v15.5 において別パッケージに移動したため、代わりに prop-types ライブラリを利用することになっている。
TypeScript を使用すれば props の型定義ができるため、こういった問題に対応できので、JavaScript特有の問題とのこと。
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
ここはemotionmの中のcacheの位置付けを理解する必要があった。cssを挿入することは変わらない。
参考：
https://theme-ui.com/guides/custom-cache-provider/
https://emotion.sh/docs/@emotion/cache
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
これは分割代入なのでpropsとして引き渡されるものの中にComponent, clientSideEmotionCache, pageProps が含まれているということ。
このpropsが渡されるのはページ間遷移が発生したタイミング。
//参考：
https://qiita.com/tetsutaroendo/items/c7171286137d963cdecf
そもそもこの時のpropsとはなんぞやと調べていてやっと辿り着いたのが、componentは現在のpageのコンポーネントまたは次に表示されるコンポーネントを受け取り、pagepropsはページが最初に読み込まれた際に初めに挿入されるデータでこれはgetInitialPropsなどで実現される。
つまり、最初のindex.jsも読み込まれ、componentにIndex()コンポーネントの内容が入れられることになる。
This is the default App component that you get and it is used by Next.Js to initialize pages. You could imagine it as an entry point of all your pages component, which rendered within this 'App' container. This App component receives two parameters which are 'Component' and 'pageProps'. 'Component' is basically the current active page component, and whenever the route of our app is changed, 'Component' will be updated to the new page component. 'pageProps' is the initial data that we inject into pages when the page is first loaded. This can be done by calling 'getInitialProps'on the custom App component.
参考：
https://dev.to/ohdylan/next-js-series-4-what-is-the-custom-app-component-in-next-js-and-how-should-we-use-it-457j
return (
<CacheProvider value={emotionCache}>
これは_document.js のなかのMyDocument.getInitialProps = async (ctx) => {で記載されている。
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
Viewportの中身も確認する。
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
