https://limjisang1115.tistory.com/161에서 계속
터미널에
yarn build입력
build폴더가 생겼다.
build폴더를 열어서 index.html을 LiveServer로 열면 열린다
기존방식
화면 - 웹서버
서버 - 웹 애플리케이션서버 (was)
next.js방식
화면 - 웹 애플리케이션 서버 (was)
서버 - 웹 애플리케이션 서버 (was)
프로젝트를 만든다
yarn create next-app first-nextjs만들때 설정을 물어보는데 아래처럼 선택
프로젝트를 IDE로 켠뒤
터미널에서 yarn dev 입력
src/app -> 메인페이지('/')
- globals.css - 전역스타일
- page.js - 화면
- layout.js - 레이아웃 (하위의 모든 페이지에 같은 레이아웃이 적용된다.)
- page.module.css - 해당 경로의 페이지에만 적용되는 css
page.js 코드변경
return값을 지우고 변경
import style from '@/app/page.module.css';
export default function Home() {
return (
<div className={style.main}> 안녕하세요 </div>
)
}next.js에서는 상대경로 대신 절대경로로 사용하는게 좋다.
next.js의 module.css는 클래스네임이 중복되지 않는다.
app패키지에 first패키지 생성
/src/app/first -> first페이지 ('/first')
first패키지안에 page.js는 필수로 있어야한다.
page.js
export default function FirstPage() {
return(
<div>첫번째 페이지 입니다</div>
);
}
first패키지에 layout.js 생성
export const metadata = {
title: '첫번째페이지',
description: 'ㅁㄴㅇㄹ',
}
export default function FirstLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
app패키지에 table패키지 생성 후 page.js
export default function TablePage() {
return(
<div>테이블 페이지 입니다</div>
);
}
table/1, table/2 처럼 상세페이지를 만들기위해서
table패키이제 [idx]패키지 생성후 page.js 생성
export default function DetailPage({params}) {
return(
<div>상세 페이지 입니다 : {params.idx}</div>
);
}
'프론트엔드 > React' 카테고리의 다른 글
| [React] CSS Modules (0) | 2026.03.12 |
|---|---|
| [React] 기초(5) - route (0) | 2023.10.04 |
| [React] 기초(4) - useEffect (0) | 2023.10.04 |
| [React] 기초(3) - useState (0) | 2023.10.04 |
| [React] 기초(1) (0) | 2023.10.04 |