목록[Next.js] (2)
민프
[Next.js][기초] 2. NextJS 설치 (수동)NextJS 페이지 루트(Defining Routes) 정의하기 | 새로운 페이지 만들어보기 | Not Found 페이지 만들기 | 네비게이션 바 만들기
이번 포스팅에서는 NextJS에서 새로운 페이지 만들고 만든 페이지들을 에 대한 루트를 정의해보는 걸 다뤄보겠습니다 React를 사용해보신분들은 react-router와 같은 개념이라고 생각하시면 될 것 같습니다react-router의 작동방식은 아래와 같이 url를 지정하고 각 컴포넌트에 대한 render를 요청하는 방식입니다 / (루트) -> /information -> /client/:id -> 근데 NextJS에서는 이렇게 URL을 정의할 필요가 없고, 파일 시스템을 통해서 URL을 표현합니다그럼 이제 페이지를 만들어 보겠습니다 1. app폴더(Root Segment) 하위 폴더 및 page.tsx 만들기app폴더(Root Segment) 하위 폴더로 만들고 싶은 page.tsx를..
[Next.js][기초] 1. NextJS 설치 (수동)
이번 포스팅에서는 next.js를 수동으로 설치해보는 내용에 대해서 다뤄보겠습니다. 1. 디렉토리를 하나 만듭니다. 2. Vscode를 실행시키고 'npm init -y'를 실행위 명령어를 실행시키면 아래와 같은 정보들을 가진 package.json이 생성될겁니다 3. 'npm install react@latest next@latest react-dom@latest'를 입력하여 최신버전을 설치해줍니다.여기에서 react는 UI와 다른 모든 것들을 구성하는 부분이고,react-dom은 react에서 UI를 구성한 것들을 브라우저의 DOM(Document Object Model)에 렌더하는 역할을 합니다 4. package.json에서 scripts의 내용을 아래와 같이 수정해줍니다 (스크립트 내용은 자유..