NextJS 공부 - 1

avatar

이번에는 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
1 comments
avatar

오. 처음에는 NestJS를 말씀하시는 줄 알았습니다. 나는 신났다. NestJS를 확인해야 합니다. 놀랍다! https://nestjs.com/

0
0
0.000