inflearn logo
강의

Course

Instructor

Getting Started with Next.js (feat. Map Service Development)

Getting Started with Next.js using create-next-app

처음부터 막히는데 어떻게 해야하는 건지 자세한 답변 바랍니다.

Resolved

798

leh87671680

80 asked

1

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

  1. 공식문서, 아래 명령어 실행.

    npx create-next-app@latest
  2. 폴더명 적고 아래와 같이 선택하여 설치.

     ✔ Would you like to use TypeScript? … Yes
     ✔ Would you like to use ESLint? … Yes
     ✔ Would you like to use Tailwind CSS? … Yes
     ✔ Would you like to use `src/` directory? … No
     ✔ Would you like to use App Router? (recommended) … Yes
     ✔ Would you like to customize the default import alias? … No
  3. 강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다.

    스크린샷 2023-07-17 오후 9.48.57.png

  4. 강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요??

    사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다.

     

seo next.js vercel csr ssg ssr

Answer 2

0

sk19gh64

저도 이거 발생 합니다. 무조건 최신버전이 아니고 특정버전을 선택 해서 해주시지

next 처음 하는 사람입장에서는 많이 아쉽습니다.

0

vroomfan

안녕하세요. 해당 강의 설명란에 해결방법을 추가했는데 잘 안되는 게 있으실까요?

  • create-next-app cli 에서 특정 버전으로 선택하여 시작하는 기능을 제공하지 않고 있기 때문에 "최신버전 + pages 기능 사용"을 cli를 통해 선택하는 것이 가장 편한 방법이라 생각했습니다. (즉, npx create-next-app@12 로 실행하여도 최신버전인 next 13.4 로 설치됩니다.)

  • 때문에 공식문서대로 npx create-next-app@latest 로 설치를 해야하지만, 강의는 13.0.7 버전을 사용한다고 명시해두었습니다.

  • 꼭 버전을 13.0.7로 변경하지 않으시더라도 질문에서 아래와 같이(App Router 사용 안하기) 답하면 강의와 충돌하는 부분은 없을 것입니다.

next cli 관련 기능이 충분하지 않아 불편을 겪으신 것 같아 죄송합니다. 진행이 잘 안되신다면 답글 부탁드립니다!

0

vroomfan

안녕하세요 문의 감사합니다.

create-next-app cli 기능이 업데이트됨에 따라 설명을 업데이트하곤 했는데, 최근 업데이트들을 제가 놓치고 있었습니다ㅠㅠ 대응이 늦은 점 죄송합니다. 그리고 상세하게 문제를 알려주셔서 감사합니다!

강의와 동일하게 세팅하기 위해선 아래와 같이 질문에 답해야합니다.

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias? … No

그럼 app router없이 pages directory를 사용하게 되고, 강의와 동일한 폴더 구조를 확인하실 수 있습니다.

나머지는 강의처럼 파일을 정리하시면 되고, 또는 제공된 소스 코드를 참고하시면 더 원활한 진행이 가능할 것 같습니다.

위의 내용을 해당 강의 설명에 업데이트하겠습니다.
다시 한 번 감사드립니다 :)

API 라우터를 사용해야 하는 경우에 대해

1

148

1

키보드 어떤 거 사용하시나요

1

351

1

next.js 멀티플 런타임 관련해서 질문 올립니다..

1

358

2

아주 기초적인 질문입니다.

1

321

1

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

1

1169

2

수업을 듣다가 SSR에 관하여..

1

551

2

interface 와 type

1

375

1

엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.

1

383

1

onLoad함수 (script태그의 onLoad X)

1

425

1

dynamic에 대한 질문

1

447

1

SSR vs SSG

1

476

2

NoSSR 관련한 질문입니다:)

1

375

1

a tag 질문 !

1

327

2

8분 20초 배포 관련

1

324

2

안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다

0

2675

2

emotion styles 파일이 빌드시 경고로 뜹니다.

1

438

1

naver map 이 출력되지 않습니다.

1

481

1

페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?

1

263

2

Failed to load resource: the server responded with a status of 404 ()

1

1033

2

VSCode 익스텐션 궁금합니다.

1

354

1

상태관리 질문 있습니다!

1

447

1

swr에 대한 질문입니다. (용어 관련)

1

372

1

swr 질문입니다!

1

336

1

안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.

1

678

2