React 16.13.1
Next 9.4.0
TypeScript 3.8.3

$ yarn create next-app next_google_map( <- app name)
$ cd next_google_map
# `install` has been replaced with `add` to add new dependencies. Run "yarn add install next react react-dom" instead. Visit https://yarnpkg.com/en/docs/cli/install

# need to add
$ yarn add install next react react-dom

# easy to handle google map api on React
$ yarn add google-map-react

# if you want to use
$ yarn add typescript prettier eslint

# if want to use redux, and redux-toolkit
$ yarn add react-redux @reduxjs/toolkit

# # options
$ yarn add styled-components @zeit/next-css @zeit/next-sass sanitize.css core-js react-app-polyfill

# install packages
$ yarn

# in package.json, scripts.dev
# -p option sets for changing port that default is 3000
{
  ...
  "scripts": {
    "dev": "next dev -p 3333",
    ...
  }
  ...
}

# if use Firebase for Hosting
# Next will use Cloud Function for Firebase
# Cloud Function needs node 10 or 8
# Next 9.4 needs node over 10.13
# wirite this to restric if need.
# and you can ignore by `$ yarn add xxx --ignore-engines`
{
  ...
  "engines": {
    "node": "10",
    ...
  }
  ...
}

# I changed pages directory to src/, writtend in tsconfig

# start dev nextJsServer
$ yarn dev

//.env
HOGE=12aswe12

// next.config.js
module.export = {
  env: {
    HOGE_ENV: process.env.HOGE // ここで渡すと場合FEで環境変数として使える。
    // サーバー側はこうしなくても `process.env.HOGE` で取得できる。
  }
}

// pages/index.tsxなど
process.env.HOGE_ENV => 12aswe12 //これでフロントが環境変数を使える。例えば<script></script>などに渡す際に使える
process.env.HOGE => ブラウザのconsoleとかに出してみれば `undefined` が見れる(server consoleには `12aswe12` が出る)

// src/pages/index.tsx
import React, { Component } from "react";
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 35.78,
      lng: 139.89,
    },
    zoom: 7,
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          // bootstrapURLKeys={{
          //   key: process.env.googleMapApiKey,
          //   libraries: ["places"],
          // }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={35.7806392}
            lng={139.9002746}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

``