【메모】next.js typescript Evergreen ISR 최소 구성 + format

setup

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

see: htps : // 기주 b. 이 m/ゔぇr세 l/네 xt. js / t ree / 가나 ry / 에 mp ぇ s / u th ty ぺ sc pt

$ npm install --save evergreen-ui

see: ぇtps://에ゔぇrg렌. 세그멘 t. 코 m / 인 t 로즈 c 치온 / 갓찐 g-s r d
see: htps : // 기주 b. 코 m / 세그 멘치오 / 에우 rg 렌

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;