next.js 경험해보기

next....?

Next.js 
=> react로 만든 프레임 워크 (react도 프레임워크잖아..? -> 가능)
-> react로 사이트 만들기를 더욱 편하게 해주는 프레임 워크 -> 면접시에는 이렇게 대답 no.....
-> react의 기초를 잘 다루고 있다면 Next.js 매우 유용
react 단점
-> 한번에 빌드하다보니 최초의 로딩시에 오래걸림
-> 또 다른 문제 검색엔진에 노출되지 않음 -> 검색엔진 ex) 네이버
// 리엑트는 하나의 페이지만 존재, 실제 페이지가 바뀌는 것이 아니라 컴포넌트가 바뀌면서 내용이 바뀌는 것 -> 검색노출이 안 되게 됨
// 네이버 search advisor -> 네이버 검색엔진에 걸리게 만들어줌
=> 이러한 검색 노출 문제 해소를 위해 server seid engine등장
//next가 이를 가능하게 해준다.
/**** csr / ssr 중요=========================================================
//기존 csr:client side render / ssr:serverside render / 
// next가 react의 단점을 보완하여 준다.

1. npm init

=> node.js 환경으로 만들어줌

2. npm install next react react-dom

3. package.json 파일 수정

// scripts 부분 수정
  "scripts": {
    "dev":"next dev -p 3001 -H 0.0.0.0", // dev server로 3001번 포트를 이용하겠다.
    "build":"next build", // 실서버 빌드를 위한 명령어
    "start":"next start", // 빌드하여 만들어진 자체적인 서버를 실행하는 명령어
    "lint":"next lint", // 모든 코드가 같은 규칙을 사용할 수 있게함
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4. Next를 설치한 폴더 내에 pages폴더 생성

=> next에서는 pages폴더 안 각각의 .jsx 파일들이 하나의 페이지가 됨.
✔ pages안에 있는 파일명은 반드시 소문자로 시작해야함

• pages 폴더
  L index.jsx // 메인페이지
  L posts/[post].jsx // 글쓰기 페이지
  --- posts폴더안에 [post].jsx파일을 생성하면 자동으로 라우터로써 기능

• 동적라우팅
  : Next에서는 폴더만 생성하면 라우터 사용한 것처럼 연결됨
  => 파일명을 [] 즉 배열 형식으로 만들기
  -- 폴더구조
  

//[post].jsx 파일 내용
import React from "react";
import {useRouter} from 'next/router'
const Post = () => {
    const router = useRouter()
    const {post} = router.query 
    return(
        <div>
            post페이지
            <br/>
            currentPage : {post}
        </div>
    )
}
export default Post

* 링크의 이동

• Link

import Link from 'next/link'
const link_test = () => {
	return (
    	<Link><a href="#">next 링크</a></Link
    )
}
export default next_link

• router

  import Router from 'next/router'
  const router_test = () => {
  	return (
    	<button onClick={()=>{Router.back()}}/>
    )
  }
  export default router_test 

5. 레이아웃 구성하기

// 작업 전 레이아웃을 먼저 구성하구 시작하는 것이 작업에 효율 증가

• 최상위 폴더 아래에 components 폴더 생성
  ✔ components 폴더 안 파일명은 반드시 대문자로 시작

• 이미지 파일 등의 저장을 위해 src 폴더 생성

• pages폴더에 _app.jsx파일과 _docuemnt.jsx 파일 생성

  -- 폴더트리 구조
  

// _app.jsx 파일 내용===========================================
const App = ({ Component }) => {
    return (
        <>      
                <Component />
        </>
    )
}
export default App
  

// _document.jsx 파일 내용======================================
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      // sheet을 사용해 정의된 모든 스타일을 수집
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      // Documents의 initial props
      const initialProps = await Document.getInitialProps(ctx);

      // props와 styles를 반환
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

6.styled-components적용

• npm install styled-components
• (front에서) 최상위폴더 아래에 .babelrc 파일 생성

// .babelrc 파일 내용
{
    "presets":["next/babel"],
    "plugins":[["styled-components",{"ssr":true, "displayName":true, "preprocess":false}]]
}

⚡ styled-components 실제 적용 ⚡

import Styled from 'styled-components'
const NavToggle = () => {
    return(
        <Toggle>
            <input type="checkbox" id="nav-toggle" className="nav-toggle"/>
            <label htmlFor="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </label>        
        </Toggle>
    )
}
export default NavToggle
//& -> 내 자신으로부터 특정 클래스를 찾을 때 사용
// css 적용  
// 단점 -> 자동완성 x 색상x 오타찾기 어려움
const Toggle = Styled.div`
background:transparent;
border-color:transparent;
& > .nav-toggle {
    display:none;
}
& > .nav-toggle + label{
    display:block;
    width:2.5rem;
    height:2rem;
    position:relative;
    cursor:pointer;
}
& > .nav-toggle + label > span {
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    border-radius:30px;
    background:#000;
    transition:all .35s
}
& > .nav-toggle + label > span:nth-child(1){ top: 0 }
& > .nav-toggle + label > span:nth-child(2){ 
    top:50%;
    transform:translateY(-50%)
}
& > .nav-toggle + label > span:nth-child(3){ bottom: 0 }
& > .nav-toggle:checked + label > span:nth-child(1){ 
    top:50%;
    transform: translateY(-50%) rotate(45deg);
}
& > .nav-toggle:checked + label > span:nth-child(2){ 
    opacity:0;
}
& > .nav-toggle:checked + label > span:nth-child(3){ 
    bottom:50%;
    transform: translateY(50%) rotate(-45deg);
}   
`

7. next. js 실행

> local인 경우
npm run dev

> 배포하려는 경우
npm run build
npm run start