반응형
먼저, React와 TypeScript 및 Next.js를 사용하기 위해 필요한 패키지들을 설치해주세요.:
npm install --save react react-dom next
npm install --save typescript @types/react @types/node
그리고 최상위 폴더에 "tsconfig.json" 파일과 "next.config.js" 파일을 생성해주세요.
tsconfig.json 파일에는 다음과 같이 작성하세요.
json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"downlevelIteration": true
},
"include": ["next-env.d.ts", "**/*.tsx", "**/*.ts", "**/*.d.ts"]
}
next.config.js 파일에는 다음과 같이 작성하세요.
javascript
const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript();
그 다음에, Next.js에서 pages 폴더를 생성하고 그에 상응하는 파일들을 생성하세요. 아래와 같은 구성의 index.tsx와 _document.tsx를 작성할 수 있습니다.
- pages
- _document.tsx
- index.tsx
pages/_document.tsx:
tsx
import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
pages/index.tsx:
tsx
import React from "react";
import Head from "next/head";
const Home: React.FC = () => {
return (
<div>
<Head>
<title>My SSR Application with React, TypeScript and Next.js</title>
</Head>
<h1>Hello, welcome to my example SSR Application!</h1>
</div>
);
};
export default Home;
이제 프로젝트를 시작하려면 최상위 폴더에서 다음 명령을 실행하세요:
npm run dev
이 예제 코드는 React, TypeScript, Next.js를 기반으로서 서버사이드 렌더링(SSR)을 제공합니다. 이를 통해 더 빠르고 최적화된 웹 애플리케이션을 보다 쉽게 구현할 수 있습니다.
반응형
'생각 > react' 카테고리의 다른 글
| react소리 조절 (0) | 2023.06.23 |
|---|---|
| react + next.js + ts (0) | 2023.06.20 |
| react-query useQueryErrorResetBoundary 사용 예제 (0) | 2023.06.13 |
| socket io 실시간 알림 (0) | 2023.06.12 |
| react-query 기능 모음 (0) | 2023.06.08 |