티스토리 뷰
반응형
환경
- OS: MacOS
- IDE: VS code
- Node: v20.6.0
1. 폴더 구조
react-next로 앱을 생성하게 되면 기본적으로 src/app 폴더가 생성된다.
해당 폴더에서 라우팅하고 싶은 url 경로명의 폴더를 생성해준 뒤에 page.jsx(page.tsx)를 생성해주면 해당 페이지로 라우팅이 된다.
다음처럼 src/app 폴더 하단에 test 폴더와 page.jsx 파일을 생성한 뒤에 간단한 페이지를 생성해주면,
localhost:[포트]/test로 접속을 해보면, Test라는 컴포넌트에 작성한 내용을 확인 할 수 있다.
React-next를 사용하게 되면 이전에 react만 사용했을때 처럼 복잡한 라우팅에 대한 코딩은 없어지게 된다.
728x90
반응형
'Front End > REACT' 카테고리의 다른 글
| React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅 (1) | 2023.10.15 |
|---|---|
| [SASS] classNames 사용하기 (0) | 2023.10.15 |
| [React / Next.js] 페이지 UI 생성하기 (0) | 2023.10.03 |
| [React / Next.js] 전역 스타일링 적용 (0) | 2023.10.03 |
| [React / Next.js] 프로젝트 생성 (0) | 2023.10.03 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Front
- K8S
- JPA
- Data Engineering
- spring boot
- API
- spring
- docker
- Linux
- NextJS
- Java
- apache kafka
- consumer
- KAFKA
- React
- frontend
- feign client
- apache
- Producer
- cs
- rhel
- Firebase
- zookeeper
- logback
- 리액트
- OS
- centos
- 프론트엔드
- Container
- broker
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함
250x250