Next.js 강의를 들으면 폴더구조가 components, styles, pages 등 여러 폴더가 존재하는데
현재는 이와 다르길래 공부해 볼 겸 작성하고있습니다.
- 설치 요구사항
- Node.js 16.8 이상
- macOS, Windows(WSL 포함), Linux가 지원
[ 자동 설치 ]
npx create-next-app@latest다음과 같이 명령어를 입력하면 최신의 next.js 설치를 진행합니다.
아래는 설치 시, 사용자가 설정해주어야 할 내용입니다.
# 프로젝트의 이름을 작성해주세요
1. What is your project named? my-app
#현재 프로젝트에 타입스크립트를 사용하시겠습니까?
2. Would you like to use TypeScript with this project? No / Yes
# 현재 프로젝트에 ESLint(코드 스타일 가이드)를 사용하시겠습니까?
3. Would you like to use ESLint with this project? No / Yes
# 현재 프로젝트에 TailWind CSS를 사용하시겠습니까?
4. Would you like to use Tailwind CSS with this project? No / Yes
# 현재 프로젝트 디렉토리에 'src/'를 사용하시겠습니까?
5. Would you like to use `src/` directory with this project? No / Yes
# App Router(파일 시스템 기반 라우터) 사용하시겠습니까?
6. Use App Router (recommended)? No / Yes
# 기본적인 alias(경로 요약)을 가져오겠습니까?
7. Would you like to customize the default import alias? No / Yes[ 수동 설치 ]
수동설치는 한 번 해봄으로써 어떤식으로 구성되는지 보기 좋은 거 같습니다
npm install next@latest react@latest react-dom@latest[ JSON 작성 ]
package.json을 생성하고 다음과 같이 작성합니다.
{
"script": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
} dev: 개발 모드에서 Next.js를 시작
build: 프로덕션 용도로 어플리케이션 빌드
start: 프로덕션 서버를 시작
lint: ESLint구성을 설정하기 위해 실행
[ app 폴더 생성 ]
app폴더를 생성합니다.
사용자가 어플케이션의 루트를 방문할 때 렌더링 됩니다.
[ root 레이아웃 생성 ]
app/layout.tsx <html> 과 <body> 태그를 이용합니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}마지막으로 app/page.tsx 가 포함된 홈페이지를 만듭니다.
export defualt function Page() {
return <h1>Hello, Next.js!</h1>
}
다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.