NextJS 공부 - 1
이번에는 React의 Framework인 NextJS에 대해서 공부해봅니다.
React도 Framework에 가깝긴 한데, 그 React를 위한 또 다른 Framework 인 상황..!!
그러다보니 React에 대해서도 어느정도 이해를 해야만 NextJS를 배우는데 유리 할 것입니다.!!
NextJS 프로젝트 생성 방법
// typescript로 만들고 싶은 경우 --typescript 옵션을 넣음
npx create-next-app@latest --typescript
// 위 명령어를 넣고 나면 프로젝트 이름을 물어보고 프로젝트 명을 입력하면 프로젝트 파일 생성
// node 버전은 12보다 높아야 잘 될듯!
폴더 구조
pages
- 모든 폴더에는 index.tsx 파일을 가장 먼저 접근 한다.
- _app.tsx의 경우 특수한 파일로(파일명이 꼭 동일해야 한다.) pages에서 정의된 components를 _app의
Component
에서 받아서 추가 작업을 해주는 것이 가능하다.
// _app.tsx File Sample
import type { AppProps } from "next/app";
import NavBar from "../components/NavBar";
import "../styles/globals.css";
// Custom App이 있는 여기에만 css import가 가능하다
// Component에서 이전까지 만들어진 Component를 받는다.
// 전역변수나 전역에 적용되어야 할 Style도 여기에 선언을 해줘야 한다.
// NavBar 같은 경우도 여기에 선언을 해주는 것이 좋다.
function App({ Component, pageProps }: AppProps) {
return (
<div>
<NavBar />
<Component {...pageProps} />
<style jsx global>{`
a {
color: red;
}
`}</style>
</div>
);
}
export default App;
- index.tsx 파일 구조
// index.tsx File Sample
// 함수명은 무엇이 되든 상관이 없고 export default 된 내용물이 페이지 로딩시 표시가 된다.
import { NextPage } from "next";
import { useState } from "react";
import NavBar from "../components/NavBar";
const Home: NextPage = () => {
return (
<div>
<h1>Hello</h1>
</div>
);
};
export default Home;
- pages에 들어 있는 파일명이 곧 url의 명이 된다.
- pages에 index.tsx는 '/'가 되고, pages에 about.tsx 파일에 내용을 입력하는 경우 '/about' 로 접근시 해당 파일 내용이 반환된다.
오늘은 여기까지!!!
아주 신박한 Framework가 아닐 수 없다..!!!!
또 공부를 해야 하는 ... 개발자 인생!! 그래도 재밌으니 해야죠!
0
0
0.000
오. 처음에는 NestJS를 말씀하시는 줄 알았습니다. 나는 신났다. NestJS를 확인해야 합니다. 놀랍다! https://nestjs.com/