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가 아닐 수 없다..!!!!

또 공부를 해야 하는 ... 개발자 인생!! 그래도 재밌으니 해야죠!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

오늘도 응원합니다 화이팅! ㅎ

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 23.60%, steem power : 1906828.84, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 44.477 KRWP [60761717 - 3258272f8820d0fd6a17efbd1454608d2d0c7504]