【메모】next.js typescript Evergreen ISR 최소 구성 + format
11635 단어 EvergreenTypeScriptnext.jsISR
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;
Reference
이 문제에 관하여(【메모】next.js typescript Evergreen ISR 최소 구성 + format), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ishiyama0530/items/dbfb258692614086a32b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)