NextJS 맛보기

✅ install

npx create-next-app@latest // --typescript 설치가능

✅ npm run

npm run dev 🔽 실행화면

❗️ 프레임워크와 라이브러리의 차이점?

• 프레임워크는 나의 코드를 불러 오는 것
  우리가 코드를 실행하면 그 코드를 실행하기 위해 필요한 조건들이 이미 짜여져있어서 우리가 직접 접근해서 설정하지 않아도 실행이 되도록 해주는 것
  ( 규칙만 잘 따르면 된다 )

• 라이브러리는 개발자로서 자신이 사용하는 것
  라이브러리를 불러와서 어떻게 사용하지 정하는 것
  ! 사용하고 싶을때 사용할 수 있는 것, 약간 우리 손에 달려있는 느낌?

How? component

NextJS는 pages 폴더안에 파일을 만들면 파일명 그대로 하나의 페이지를 구성하게 된다.

파일명 : index.js

export default function Home() { return 'Home page 입니다' }

localhost:3000/ 주소로 바로 적용되어 페이지가 보여진다.

• component의 이름으로 route를 정하는것이 아닌 pages폴더안에 파일명으로 route를 정하게 된다.

• export default를 설정해야 component 내용이 화면에 보여진다.



특징

1. JSX를 사용하기 위해서 확장자를 JSX로 변경할 필요없이 jsx문법을 사용할 수 있다.
2. import 또한 할 필요 없다 from 'react'
   단, useState, useHook 을 사용하기 위해선 import를 해줘야한다.
3. render 함수에서 jsx문법을 사용할 수있다.