setup

$ npx create-next-app --example with-typescript with-typescript-app

see: https://github.com/vercel/next.js/tree/canary/examples/with-typescript

$ npm install --save evergreen-ui

see: https://evergreen.segment.com/introduction/getting-started
see: https://github.com/segmentio/evergreen

pages/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

const IndexPage = () => (
  <Button>I am using 🌲 Evergreen!</Button>
)

export default IndexPage

ISR

pages/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
import {sampleUserData} from '../utils/sample-data'
import { GetStaticProps } from 'next'

type Props = {
  data: typeof sampleUserData
}

const IndexPage = ({data}:Props) =>{
  return (<><ul>{data.map((x)=><li key={x.id}>{x.name}</li>)}</ul>
  <Button>I am using 🌲 Evergreen!</Button></>)
}

export const getStaticProps: GetStaticProps = async () => {
  return { props: { data: sampleUserData }, revalidate: 60 }
}

export default IndexPage

see: インクリメンタル静的再生成 (Incremental Static Regeneration; ISR)

format

..vscode/settings.json

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.organizeImports": true // import 自動整列 & 不要定義の削除
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

after saved.

pages/index.tsx

import { Button } from "evergreen-ui";
import { GetStaticProps } from "next";
import React from "react";
import { sampleUserData } from "../utils/sample-data";

type Props = {
  data: typeof sampleUserData;
};

const IndexPage = ({ data }: Props) => {
  return (
    <>
      <ul>
        {data.map((x) => (
          <li key={x.id}>{x.name}</li>
        ))}
      </ul>
      <Button>I am using 🌲 Evergreen!</Button>
    </>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  return { props: { data: sampleUserData }, revalidate: 60 };
};

export default IndexPage;