Next.js 개발 시작 - 프로젝트 생성, 기본적인 페이지

지금까지 Node.js, flask, 루비온레일즈로 웹 개발을 했었다.

루비온레일즈는 블로그 시작하기 전에 했던거라 없지만 Node.js와 flask는 블로그에 정리되어 있다.

 

Node.js, Next.js, flask가 각각 어떻게 다른지 간단하게 설명하자면, 우선 Node.js는 서버 사이드 애플리케이션 개발에 유리하다.

그리고 Next.js는 react 기반이고 웹 애플리케이션 개발에 적합하다. Next.js는 서버 사이드 애플리케이션 개발에는 적합하지 않을 수 있다.

flask는 Node.js와 Next.js와는 다르게 javascript가 아니라 파이썬 기반이고, 다양한 라이브러리로 인해 확장성이 높다.

그리고 코드 자체가 간단하다는 것이 가장 큰 장점인 것 같다.

프로젝트 자체가 가벼운 편이고 자유도가 높은데, 대규모 프로젝트에는 조금 적합하지 않을 수 있다고 한다.

 

이번에 Next.js를 시작한 이유는 인터넷프로그래밍 수업을 듣는 김에 웹 개발을 한 번 더 해보려고 하는데 안 해본 프레임워크로 시도해보기 위해서이다. 

지금까지 웹 개발을 하면서 실제 웹사이트 주소를 만들어서 다른 사람도 접속할 수 있게 했던 경험은 옛날에 루비온레일즈로 개발한 사이트를 구름이라는 웹호스팅 사이트에서 돌렸던 적 밖에 없는데, 지금 다시 보니 그 서비스가 유료가 되어 있었다.

 

아무튼 이번에는 실제 사이트 주소를 만들어서 다른 사람도 접속할 수 있게끔 하고, 구글 에드센스 등으로 수익화하는 것까지 진행해보려고 하는데, 그중에서 Next.js가 SEO 최적화가 잘 되어 있어 검색엔진(구글이나 네이버)의 검색 결과에 상위에 잘 뜨게 해준다는 장점도 있고, 실제 사이트 주소를 만드는 웹 배포도 aws나 다른 클라우드 서비스를 따로 공부할 필요 없이 vercel이라는 곳에서 아주 간단하게 할 수 있다길래 선택하게 되었다.

 

이제 Next.js 프로젝트를 한번 만들어 보겠다.

Node.js가 안 깔려 있는 사람들은 깔아야 하는데 아래 링크를 참조하길 바란다.

https://bluesunset-hack.tistory.com/8

Node.js

이제 프로젝트를 만들 폴더로 이동해서 cmd 창에서 

npx create-next-app@latest

이렇게 입력하면 프로젝트가 생성이 된다.

설정은 일단 이렇게 했는데 다 알고 한건 아니다.

프로젝트 이름은 그냥 nextjs로 했다.

npm run dev

이제 프로젝트 폴더로 가서 이 명령어를 입력하면 웹 서버가 실행이 된다.

그리고 localhost:3000으로 가면 이렇게 기본 화면이 나타난다.

 

이제 페이지 구성을 해볼 것이다.

next.js는 파일 기반 라우팅을 제공하기 때문에 router에서 javascript로 따로 연결을 해줄 필요 없이 폴더 구성만 잘해주면 된다.

우선 간단하게 app 폴더 안에 dashboard라는 폴더를 만들고 page.tsx 파일을 만든다.

이렇게 작성해주고, localhost:3000/dashboard로 가면

이렇게 나온다.

 

이제 동적 라우팅이라는 것을 해볼 것이다.

게시판 같은 사이트에서 글마다 양식은 같은데 글 내용이 다른 페이지들을 구현하는 등의 기능에서 사용되는데,

/dashboard/1 이런 식으로 링크에 쿼리를 보내는 방식이다.

아까 만든 dashboard 폴더 안에 [pages]라는 폴더를 만들고 그 안에 또 page.tsx 파일을 만들어줬다.

params가 쿼리를 의미하고, params를 pages라는 변수로 가져온다.

이때 주의해야 할 점은 변수 이름 pages가 dashboard에 만든 폴더명 [pages]의 pages라는 점이다.

파일 기반 라우팅이기 때문에 기본적으로 사이트 주소와 폴더명, 변수명을 일치시켜야 한다.

dashboard 뒤에 /{변수값} 주소로 들어가면 이렇게 param이 제대로 뜬다.

 

그런데 서버 상에서는 이런 에러가 발생하게 된다.

에러가 발생했지만 페이지는 제대로 로딩되었다.

이 에러가 무엇인지 설명하기 위해서는 동기, 비동기 방식에 대해 알아야 한다.

이 부분은 웹보다도 특히 앱을 만들 때 많이 고생하며 배웠던 기억이 있는데 간단하게 동기는 직렬, 비동기는 병렬이라고 생각하면 된다.

동기 방식은 어떤 코드가 다 실행되고 나서야 다음 코드가 실행된다.

비동기 방식은 코드가 다 실행되기 전에 다음 코드가 실행되는 방식이다.

대부분 동기는 await, 비동기는 async를 붙여서 사용한다.

페이지가 로딩되기 위해서는 params.pages 값이 필요한데 이 값을 가져오기 전에 비동기 방식으로 렌더링이 되면서 에러가 발생할 수 있다. 그래서 에러메세지를 보면 params should be awaited라고 되어 있다.

그리고 Next.js가 친절하게 에러메세지에 이를 해결하는 방법에 대한 문서 링크를 같이 준다.

그래서 해당 링크로 가서 해결법을 보니 크게 두가지가 있었다.

먼저 대부분의 경우에 

$ npx @next/codemod@canary next-async-request-api .

next-async-request-api를 설치하면 자동으로 해결해준다고 한다.

async function Page({ params }) {
  // asynchronous access of `params.id`.
  const { id } = await params
  return <p>ID: {id}</p>
}

두번째로는 그냥 직접 params를 가져오는 부분에 await를 붙여주는 방식이다.

 

우선 api를 설치해봤는데 에러메세지는 계속 뜨길래 직접 await를 붙여줬다.

export default async function Page({params}:{params:{pages:string}}){
    const resolvedParams = await params;
    return (
        <div>
            <p>param: {resolvedParams.pages}</p>
        </div>
    )
}

이렇게 코드를 바꿔주니 해결이 되었다.

 

이렇게 페이지 라우팅 방법까지 알아보았다.