[Next.js] Next.js 프로젝트 세팅 + 페이지 라우팅

이번에 들어가게 된 회사에서 Next.js를 사용한다고 하여 미리 공부해보기로 했다.

 

Next.js란 무엇일까? Next.js란 풀스택 웹앱을 더 쉽게 구축하기 위한 React 프레임워크이다.

프론트엔드를 하기 위해 React도 겨우 공부했는데 React에 익숙해지기도 전에 Next.js까지 해야한다니... 배움이 끝이 없구나 싶다. 그치만 결국 더 쉽고 편하기 위해 사용하는거겠죠? 직접 사용해보며 React보다 얼마나 더 쉽고 편한지 경험해볼예정이다 (ㅋㅋ) 

 

1. create-next-app으로 Next.js 프로젝트 세팅하기

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

 

우선 공식문서를 보며 차근차근 따라해보자.

Typescript도 공부해야해서 겸사겸사 typescript로 세팅하려고 했는데 create-next-app을 이용하면 자동으로 typescript로 세팅된다고 한다! 또한 tailwindcss, ESLint도 자동으로 설정되어 편하다.

 

vscode의 터미널에 아래 명령어를 입력한다.

npx create-next-app@latest

 

그러면 아래같은 메세지가 뜬다.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

 

나는 다 Yes를 선택했다. import alias 이건 뭔지 모르겠는데 앞으로 천천히 알아보는걸로..

 

폴더를 열고(cd 프로젝트명) npm run dev으로 실행시켜보자.

 

 

node 버전이 낮아서 안된다고 한다.

node를 터미널로 설치하는 방법도 있지만 그냥 공식홈페이지에서 installer 다운받아서 설치했다.

 

 

node -v로 새 버전이 제대로 설치됐는지 확인하고 npm run dev로 실행!

브라우저를 열고 localhost:3000을 입력하면 사이트가 뜬다 (터미널에 뜬 주소 위에 ctrl+클릭해도 바로 뜬다.)

 

vscode에서 코드를 확인해보면

이런.. 복잡한 화면이 뜨는데 다 삭제해줍시다 어차피 새로만들어야하니깐..

 

2. 페이지 라우팅 하기

우선 설치를 했는데.. 뭘 해야할까요? 페이지 라우팅을 해보자.

 

Next.js는 위 사진처럼 app폴더 내의 page.js에서  기본 페이지가 나오고, 아래 폴더를 만들면 폴더 속의 page.js에서 라우팅된 주소의 페이지가 나온다.

 

localhost:3000/test 로 접속했을 때, 원하는 화면이 뜨도록 해보자.

 

src\app 폴더에 test 폴더를 만들어 준 후, page.tsx 를 생성한 뒤 내용을 적어준다.

 

제대로 뜨는 모습을 확인할 수 있다.

 

그럼 이제 메인페이지에서 test 페이지로 이동하는 링크를 달아보자.

 

import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>우와~~ Next.js 시작</div>
      <Link href="/test">테스트 페이지로 이동하기</Link>
    </main>
  );
}

 

간단하게 page.tsx에 <Link> 태그로 링크를 추가한다.

 

 

테스트 페이지로 이동하는 링크가 잘 생겼다!

다음 글에서는 페이지 안에 이것저것을 채워 볼 예정이다.