저는 교수님이 Nest.js를 이용해서 블로그를 만들어볼거라고 하셨습니다.
그래서 Blog라는 폴더를 생성하고 그 안에 back,front 폴더를 만들어줬습니다.

1. 환경세팅⚙

1) npm init
2) npm install next react react-dom
그러면 기본적인 webpack을 포함한 React관련 개발환경이 모두 설치가 됩니다.
3) . package.json 수정

기존코드의 scripts 부분

"scripts":{
	"test": "echo \"Error: no test specified\" && exit 1"
}

수정코드

"scripts":{
	"test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev -p 3001 -H 0.0.0.0" 
    "build":"next build" 
    "start":"next start" 
    "lint":"next lint"
}

"dev": "next dev -p 3001 -H 0.0.0.0" => 데브서버

-p:  [포트번호]
-H 0.0.0.0 : 같은 와이파이를 사용하고 있으면 핸드폰으로 확인 가능

"build":"next build" => 실서버에 빌드해서 올렸는데 그때의 빌드명령어

"start":"next start" => Next자체적으로 웹서버를 가지고 있음, 그 서버를 실행하는 명령어

lint에 대해서는 향후 설명을 들을 예정

이제 기본적인 환경 세팅은 끝났습니다.
Next.js를 이용하여 Hello next를 찍어보겠습니다.

2. Hello Next.js 찍어보기

먼저, front 안에 pages라는 폴더를 만들고 그 안에 index.jsx파일을 만들어줍니다.

📄 index.jsx 코드

const Index =() =>{
    return(
        <>
            Hello Next.js
        </>
    )
}
export default Index

그리고 터미널에서 npm run dev를 입력하여 데브서버를 실행시키고, 3001포트로 들어가보면 Hello Next.js가 잘 뜨는 것을 확인할 수 있습니다.

그런데 리액트를 쓸때와는 코드에 다른점이 있다는 것이 보입니다.
바로! ⭐import React from 'react'를 적지 않아도 된다는 점입니다

3. Next.js의 어마어마한 장점?

⭐파일명 자체가 라우터가 된다는 점!

예시를 바요 보여드리겠습니다.

pages폴더 안에 join.jsx 파일과 login.jsx 파일을 새로 만듭니다.

📄 join.jsx 코드

const Join = ()=>{
    return(
        <>
            Hello Join
        </>
    )
}
export default Join

📄 login.jsx 코드

const Login = ()=>{
    return(
        <>
            Hello Login
        </>
    )
}
export default Login

그리고 localhost:3001/join을 입력해보면 놀랍습니다!
Hello Join이 페이지에 나옵니다!!

배우면서 페이지 만드는게 엄청 편리할거같다는 생각이 많이 들었습니다!!

다음포스팅에는 넥스트를 활용하여 프론트를 더 꾸며보겠습니다ㅎㅎ