Nextjs에서 typescript 설정 시 Layoyt 동작 안 하는 문제 (해결책은 있으나 원인은 모름)

sig03
2 min readJun 16, 2022

--

typescript를 기본으로 적용한 채 create-next-app 으로 nextjs 앱을 만들어서 작업을 하고 있다.

$ npx create-next-app --typescript test-app

nextjs에서 페이지마다 동일한 UI를 넣어주려고 찾아보니 Layout 기능이 있다. react의 HOC랑 비슷한 개념인 듯 하다.

공통으로 적용할 Layout 파일을 만들고 이를 _app.tsx에서 감싸주면 된다. 그런데 안 된다. Layout 이 나타나지 않는다. 잘 안될때는 처음으로 돌아가서 default로 해봐야 한다.

일단 typescript를 적용하지 않고 기본으로 앱을 생성해서 해 봤다. 오호라, 된다. Layout 부분이 잘 나타난다. 다시 typescript를 기본으로 생성해서 해 보니 안 된다. 그러면 typescript 없이 생성한 후에 Layout 기능이 잘 되는것을 확인하고 typescript를 나중에 적용해 봤다. 된다.

//Layout 안 됨
$ npx create-next-app --typescript test-app
//Layout 됨
$ npx create-next-app test-app 이후 typescript 수동 적용

typescript 문제인 건 확인했는데 원인은 모르겠다. Layout 기능이 안 된다면 nextjs 앱을 기본 생성 후 typescript를 적용하는 방향으로.

--

--

sig03
sig03

No responses yet