일단, 파일을 생성하는 것은 자주 했으니 넘어간다.
터미널을 열어서
npx create-next-app@latest
을 쳐준다.
그 다음에
npm run dev를 치면 페이지가 열리고 코드를 치면 된다.
export default function Home() {
return (
<div>
<h4 className="title">애플후레시</h4>
<p className="title-sub">by dev kim</p>
</div>
)
}
React와 같은 문법을 사용해주면 된다.
export default function Home() {
let name = 'park';
let link = 'https://naver.com';
return (
<div>
<h4 className="title">애플후레시</h1>
<p className="title-sub">by dev {name}</p>
<a href={link}>링크</a>
</div>
)
}
변수를 넣어줄 때도 똑같이 {}를 열어서 사용하면 된다.
export default function Home() {
return (
<div>
<h4 className="title" style={{ color : 'red', fontSize : '20px' }}>애플후레시</h4>
<p className="title-sub">by dev {name}</p>
</div>
)
}
object자료형을 사용할 때도 {}안에 {}를 열어서 사용한다.