-
[Next.js] 1. Create a Next.js App공부 2021. 10. 21. 22:56
1. yarn으로 react 시작하기
yarn create next-app 프로젝트명 yarn add next react react-dom2. Next.js에서 페이지들은 파일 이름에 따라 라우팅 되기 때문에 pages 라는 디렉토리(폴더)가 반드시 필요함
mkdir pages3. pages 디렉토리 아래에 index.js파일 만들기
// 예시 import Head from "next/head"; import Link from "next/link"; export default function Home() { return ( <div className="container"> <Head> <title>Create Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> <main> <h1 className="title"> Read{" "} <Link href="/posts/first-post"> <a>this page!</a> </Link> </h1> <p className="description"> Get started by editing <code>pages/index.js</code> </p> </main> </div> ); }3. packages.json 파일 수정
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }4. 구동하기
yarn dev 후 localhost:3000 들어가기'공부' 카테고리의 다른 글
[Next.js] 3. Assets, Metadata, and CSS (0) 2021.10.25 [Next.js] 2. Navigate Between Pages (0) 2021.10.22 [React] styled-components를 사용하는 이유 (0) 2021.10.20 [React] key값으로 index를 지양하는 이유 (0) 2021.10.18 [WEB] CSS 이해하기 (0) 2021.10.14