記事の内容
新規プロジェクト作成から基本的な機能をそろえるところまでの手順をまとめます。
前提
Nextの環境構築が終わっていること。
環境
・Node.js v12.18.3
本題
１．新規プロジェクト作成
プロジェクトを置きたいフォルダに移動し、以下コマンドを実行します。
npx create-next-app [プロジェクト名]
２．デザインツールのインストール(Material ui)
reactではメジャーなデザインツールMaterial uiをインストールします。
yarn add @material-ui/core @material-ui/icons material-table --network -timeout 100000
３．ヘッダー、フッターなどのレイアウトを整える
まず、プロジェクトのルートディレクトリにcomponentsフォルダを作成します。
次にcomponentsフォルダの中に、Layout.js、Header.js、Footer.jsファイルを作成します。
そして、Layout.js、Header.js、Footer.jsに以下をコピペします。
Layout.js
import React, { Component } from 'react';
import Head from 'next/head';
import Header from '../components/Header';
import Footer from '../components/Footer';
import style from '../styles/globals'
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
export default class Layout extends Component{
render(){
return (<div>
<Head>
<title>{this.props.title}</title>
<meta charSet='utf-8' />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
{/* デザインツール関係 */}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
{/* レスポンシブのテキスト */}
<script src="flex-font-layout_2.0.0.js"></script>
<script src="flex-font-layout_editor_2.0.1.js"></script>
</Head>
{style}
<Header header={this.props.header} title={this.props.title} />
<React.Fragment>
<CssBaseline />
<Container>
{this.props.children}
</Container>
</React.Fragment>
<Footer footer="🄫 2021 Shimura" />
</div>)
}
}
Header.js
import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { render } from 'react-dom';
import Link from 'next/link';
import Box from '@material-ui/core/Box'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
appbar: {
backgroundColor: "rgba(0,0,0,0)",
color: "#000",
},
title: {
flexGrow: 1,
},
}));
export default function Header(props) {
const classes = useStyles();
return(<header>
<div className={classes.root}>
<AppBar position="fixed" className={classes.appbar} elevation={0}>
<Box display='flex' flexDirection="row-reverse">
<Toolbar>
<Link href="/">
<Button color="inherit">Home</Button>
</Link>
<Link href='/about' >
<Button color="inherit">About</Button>
</Link>
</Toolbar>
</Box>
</AppBar>
</div>
<div>{props.header}</div>
<h1>{props.title}</h1>
</header>);
}
Footer.js
import { CenterFocusStrong } from '@material-ui/icons';
import React, { Component } from 'react';
export default class Footer extends Component{
render(){
return(<footer style={{backgroundColor:"black",color:"white",height:'20px'}}>
<div>{this.props.footer}</div>
</footer>);
}
}
4.レイアウトを反映させる
最後に/pages/index.jsを以下のように書き換えます。
index.js
import Layout from '../components/Layout'
// import styles from '../styles/Home.module.css'
import Introduce from '../components/Introduce'
import HomeWelcome from '../components/HomeWelcome'
import Work from '../components/Work'
import Contact from '../components/Contact'
import Box from '@material-ui/core/Box'
export default function Home() {
return (<Box>
<HomeWelcome />
<Layout>
[作成したコンポーネントをここに置く]
</Layout>
</Box>)
}
<Layout></Layout>で囲んだコンポーネントには手順３で作成したレイアウトが適用されます。