公園情報サイト開発 - part2 - 環境設定

Next.jsのプロジェクト作成

create-next-app プロジェクト名 --typescript

プロジェクトディレクトリに移動し、yarn devでNext.jsの画面が出ることを確認しておきます。

cd プロジェクト名
yarn dev

この画面です。

Material-uiのインストール

npm install --save @material-ui/core @material-ui![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559029/5ab7d6f4-b2d3-0568-a71c-2b0cad9f2f3e.png)
/icons

Material-uiで画面作成できることの確認

まずは、Material-uiのボタンが表示されることだけ確認します。

import React from "react";
import Button from "@material-ui/core/Button";

const Home: React.FC = () => {
  return (
    <Button
      color="primary" // (2)
      variant="contained" // (3)
    >
      Hello World {/* (1) */}
    </Button>
  );
};

export default Home;

画面で確認すると、

ホスティングサービスにデプロイしてみる

Netlify, Vercel、Github Pagesなど無料のやつがありますが、
Googleアドセンス的に、Netlifyにしました。

Netlifyは利用したことがあったので、その他を利用してみたかったのですが、
Vercelとか。VercelはGoogleアドセンスをポリシーで禁止しているので今回は諦めました。

こういうとこを参考にさせてもらいました。

また、GithubとNetlifyの連携は、こちらを参考に行いました。