Next.js3 layout layout 파일은 무조건 존재해야 하는 파일이다. layout 파일이 없어도 빌드하면 자동으로 생기는 파일이다. Next.js는 page 컴포넌트를 바로 렌더링 하는 것이 아니라 layout에 있는 컴포넌트를 렌더링하는 것이다. 하나의 layout이 아닌 여러개도 만들어 사용 가능하다. 장점 재사용하는 element들을 모든 page에 작성하는 대신 layout에 한 번만 적을 수 있다. 여러 layout 파일이 있을 때 대체되는 것이 아니라 중첩된다. 2024. 3. 4. page Next.js는 Framework이기 때문에 Next.js의 규칙에 맞게 파일을 생성해야 올바르게 빌드된다. 1. 규칙 Next.js는 웹사이트의 첫 번째 페이지를 빌드하기 위해 'app'이라는 이름을 가진 폴더 안에 'page'라는 이름을 가진 파일을 찾는다. 따라서 app이라는 폴더를 만들고 그 안에 page.jsx(tsx)를 생성한다. 2. 주의사항 page 컴포넌트는 export default된 React 컴포넌트여야 한다. page 컴포넌트의 이름은 마음대로 작성해도 되지만 파일 이름은 변경하면 안된다. page 파일은 항상 app 폴더 내부에 존재해야한다. 2024. 3. 4. 설치 1. 폴더 생성 $ mkdir next-example 2. 폴더 이동 후 package.json 생성 $ cd next-example $ npm init 3. React.js, Next.js, react-dom 설치 $ npm install react@latest next@latest react-dom@latest 4. package.json 수정 생성된 package.json 파일을 열어 "scripts" 부분을 아래처럼 수정한다. ..., "scripts": { "dev": "next dev" }, ... 앞에 "dev"는 원하는 다른 말로 수정 가능하다. (위의 경우 "npm run dev" 명령어로 앱을 빌드한다.) 2024. 3. 4. 이전 1 다음
