next.js
작성일: 2023. 3. 8. (수)기본 설치방법yarn init -yyarn add next react react-dom 기본 사용방법package.json 수정하기"scripts": { "dev": "next", "build": "next build", "start": "next start" },pages 폴더 생성index.js 생성 및 컴포넌트 함수 작성하여 export# 기본 컴포넌트 index.jsexport default () => { return ( <> <h2>Happy World</h2> <Links /> </> ); } 기본 실행방법npm run dev(yarn run dev) -> 아무것도 없으면(pages 폴더) 실행 안 됨yarn next 하니까 3000 포트 실행되었음 라우터 설정방법Links.js 컴포넌트(components 폴더 내에 생성)라이브러리 가져옴import Link from 'next/link';이동할 링크 설정(a태그와 같다) 및 export 해줌export default () => { return ( <ul> <li><Link href={"/"}>root</Link></li> <li><Link href={"/classs"}>classs</Link></li> <li><Link href={"/happy"}>happy</Link></li> </ul> ); } happy.js사용할 파일에 불러와서 사용해준다.생성한 컴포넌트 불러오기import Links from "../components/Links";<Links />를 통하여 해당 컴포넌트를 불러온다. export default () => { return ( <> <h2>해피컴포넌트</h2> <Links /> </> ); }
