Next.js(1)

조은형·2023년 11월 20일

Next.js 시작

일단, 파일을 생성하는 것은 자주 했으니 넘어간다.
터미널을 열어서
npx create-next-app@latest
을 쳐준다.

그 다음에
npm run dev를 치면 페이지가 열리고 코드를 치면 된다.

Next.js는 React 친구

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자료형을 사용할 때도 {}안에 {}를 열어서 사용한다.

profile
좋은 형

0개의 댓글