[Next.JS] NextJS 기초

 

 

 

 

 

 

---

 

 

 

 

 

NextJS 

 

 

 

➡️ 이전에는 백엔드는 GraphQL이나 Rest 사용하여 Node.JS로, 프론트는 React, Vue 등으로 만들었다.

      But, NextJS는 API를 만들기 위해 별도의 서버를 구축할 필요가 없이, Next만으로 풀스택 구현이 가능한 framework이다.

 

 

 

➡️ create-react-app에서는 모든게 CSR이다.

CSR은 react코드가 불러오기전에는 화면이 그려지지 않아서 흰 화면만 보여질 수 있다는 단점이 있다.

 

 

 

➡️ NextJS에서는 페이지들이 미리 만들어진다. 

Next는 backend상에서는 ReactJS를 돌리고있고, 그동안 pre-generate(사전생성)하며 그것은 HTML페이지가 된다.

js가 모두 다운로드 되어지면 모든게 일반적인 ReactJS처럼 동작하게된다.

이렇게되면 CSR의 단점인 백지화면, 로딩 스테이지는 없어지게 된다.

 

 

 

 

---

 

 

 

 

Api

 

 

 

• api를 생성하기 위해서는 pages-[api폴더]-[api이름]으로 별도의 서버 생성없이
  api 라우트를 통해 db를 생성하고, 수정할 수 있다.

 

 

 

ex) login정보 백엔드로 보내기 - Form Submission

//form에서 email입력후 submit
const onValid = (data: EnterForm) => {
    fetch('api/users/enter'),
      {
        method: 'POST',
        body: JSON.stringify(data),
      };
  };

//api폴더-users-enter.tsx

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  console.log(req.body);
  res.status(200).end();
}

 

submit → network에서 enter이 들어오고 있고, 터미널에 node-{"email" : 입력값}이 들어오는 것을 볼 수 있다.

 

 

 

 

🌟 console.log(req.body.email) 
      req.body는 req의 인코딩 기준으로 인코딩됨
      ( req.body를 콘솔에 찍으면 {“email”:~~} 되어있지만 req.body.email을 콘솔에 찍으면 작동하지 않는다.
       해결하기 위해서는 headers를 설정해줘야한다.)

  const onValid = (data: EnterForm) => {
    fetch('/api/users/enter', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    });
  };

 

 

 

 

 

---

 

 

 

 

style jsx

 

 

따로 css파일 만들지않고 js코드 내에서 style jsx로 스타일지정이 가능하다.

(일반 html태그) <style> 태그에 jsx를 추가하고 {` 스타일지정 `} 

module.css처럼 className이 무작위화되며 scope가 선언된 컴포넌트 이다.

때문에 그냥 classname이나 태그이름으로 간단하게 타겟팅해도 다른 컴포넌트에서의 태그와 중복지정되지 않는다.

 

<style jsx>
  {`a {text-decoration: none;}`}
</style>

 

 

export default function Navbar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        <a className={router.pathname === '/' ? 'active' : ''}>home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === '/about' ? 'active' : ''}>about</a>
      </Link>
      <style jsx>{`
        a {
          text-decoration: none;
        }
        .active {
          color: red;
        }
      `}</style>
    </nav>
  );
}

 

 

 

jsx 뒤에 global을 지정해주면 모두에게 지정된다.

단, 여기서 '모두'란 한 page를 말한다.

( Next는 page단위! )

 

ex) about페이지에서 global style을 적용시켜주면 home 페이지에서는 적용되지 않는다.

      <style jsx global>{`
        a {
          text-decoration: none;
        }
        .active {
          color: red;
        }
      `}</style>

 

전체 page에서 적용되는 global style을 만들고 싶다면 _app.js에서 style을 지정해준다.

 

 

 

 

 

 

 

---

 

 

 

 

 

 

_app.js

 

 

✔️ NextJS는 다른 페이지들이 렌더링되기 전에, 먼저 _app.js를 본다.
모든 페이지에서 global하게 보여주고싶은 부분은 _app.js에서 나타내준다.

export default function _app({ Component, pageProps }) {
  return (
    <>
      <Navbar />   //전체페이지의 상단에 Navbar 컴포넌트가 들어가게된다.
      <Component {...pageProps} />   //렌더링하기를 원하는 페이지가 들어간다.
      <span>hello</span>   //공통렌더링 태그
    </>
  );
}

 

 

 

 

✔️  컴포넌트내에 css를 import 하고싶다면 module이어야만 한다.
      but, custom App ( _app.js) 에는 global Styles를 import 가능하다.

 

✔️   전체 페이지에 공통적으로 적용하고 싶은 style을 <style jsx global>로 지정해준다.

import '../styles/globals.css';

export default function Anyname({ Component, pageProps }) {
  return (
    <>
      ...

      <style jsx global>{`
        a {
          color: black;
        }
      `}</style>
    </>
  );
}

 

 

 

 

 

---

 

 

 

 

 

 

Layout

 

 

layout pattern

 

 

_app.js가 너무 길어지는 것을 방지하기 위해서

layout component를 생성하여 layout에 관련된 것들은 따로 관리해서 _app에 추가해준다.

( app에는 검색엔진, 스크립트 분석 등)

 

import Navbar from './Navbar';

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <div>{children}</div>
    </>
  );
}

export default function _app({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

 

 

 

 

 

 

---

 

 

 

 

 

 

redirects / rewrites

 

 

✔️ redirect

   기존의 source입력시 원하는 다른경로로 이동시키고 싶을 때 사용한다.

  

   예시) /contact로 접근시 /form으로 이동한다.

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/contact',
        destination: '/form',
        permanent: false,
      },
    ];

 

 

 

 

✔️rewrite

    특정 url을 입력하면 masking하여 다른 url을 보여준다.

    api key를 숨기고 싶을 때 유용하게 이용가능하다.

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/movies',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

 

  

 

 

 

 

 

[연관글]

 

 

[Next.JS] Pre-rendering & Static Generation & SSR/CSR

 

[Next.JS] Dynamic Routes

 

 

[TIL220410] PlanetScale (serverless DB platform)