# Migrating Next.js from Create React App
## Next.js dependency 설치하기
```bash
npm install next@latest
```
## Next.js configuration 파일 작성하기
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // Outputs a Single-Page Application (SPA).
distDir: './dist', // Changes the build output directory to `./dist/`.
}
export default nextConfig
```
## Typescript와 Next.js 호환시키기 (optional)
```bash
yarn add typescript --dev
```
{% code title="tsconfig.json" %}
```json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"strictNullChecks": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"./dist/types/**/*.ts"
],
"exclude": ["node_modules"]
}
```
{% endcode %}
## TailwindCSS 설치하기
```bash
npm install -D tailwindcss
```
{% code title="tailwind.config.ts" %}
```typescript
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
export default config;
```
{% endcode %}
{% code title="postcss.config.mjs" %}
```javascript
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;
```
{% endcode %}
## layout.tsx, page.tsx 파일
app 폴더 내에 layout.tsx, page.tsx 파일을 생성한다.
```typescript
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'React App',
description: 'Web site created with Next.js.',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```typescript
export default function Home() {
return Hello, world!
;
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://leejaelll.gitbook.io/dev_jaell/settings/migrating-next.js-from-create-react-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.