틀 만들기

1. 서버 사이드 랜더링 이해하기

2. 틀 다지기

front 폴더 생성
npm init
npm i next@9
packagejson 수정 =>
"scripts": {

"dev": "next"

},

"author": "gunwooKim",
front 폴더 내 pages 폴더 생성

index.js 생성

const Home = () => {
    return(
        <div>Hello, next!</div>
    )
}

export default Home;

next js 는 폴더 내 pages라는 이름은 무조건 필수(next가 코드스플린팅)
npm i react react-dom
npm run dev 실행시 빌딩이 되고 뜨는 로컬호스트로 들어가보면 Hello, next가 뜬다

components 폴더 생성

AppLayout.js 생성

import React from 'react'
import PropTypes from 'prop-types'

const AppLayout = ({children}) => {
  return (
      <div>
          <div>공통메뉴</div>
          {children}
      </div>
  )

  AppLayout.prototype = {
        children: PropTypes.node.isRequired,
  }
}

export default AppLayout

npm i prop-types

pages 하위 파일 수정

import React from "react";
import AppLayout from "../components/AppLayout";

const Home = () => {
    return(
       <AppLayout><div>Hello, Next</div></AppLayout>
    )
}

export default Home;

<AppLayout><div>Hello, Next</div></AppLayout> => 감싸주는 애들이 children이 된다

다른 레이아웃으로 감싸주고 싶다면 components에 다른 레이아웃을 만들고 위와 같은 방식으로 감싸주면된다.

출력 페이지 예시

Layout 수정

import React from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'

const AppLayout = ({children}) => {
  return (
      <div>
          <div>
              <Link href ="/"><a>노드버드</a></Link>
              <Link href ="/profile"><a>프로필</a></Link>
              <Link href ="/signup"><a>회원가입</a></Link>
          </div>
          {children}
      </div>
  )

  AppLayout.prototype = {
        children: PropTypes.node.isRequired,
  }
}

export default AppLayout

코드 일원화를 위한 npm 설치

npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D

front 에 es.eslintrc.json 파일 생성

{
    "parserOptions": {
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "node": true
    },
    "extends": [
        "eslint:recommended", 
        "plugin:react/recommended"
    ],
    "plugins": [
      "import",
      "react-hooks",
    ],
    "rules": {
      "jsx-a11y/label-has-associated-control": "off",
      "jsx-a11y/anchor-is-valid": "off"
    }
  }

스타일드 컴포넌트, antd 설치

npm i antd styled-components @ant-design/icons

pages폴더 안에 _app.js 생성

import React from "react";
import "antd/dist/antd.css";
import PropTypes from "prop-types";
import Head from "next/head";
const NodeBird = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
      </Head>
      <Component />
    </>
  );
};

NodeBird.prototype = {
  Component: PropTypes.elementType.isRequired,
};

export default NodeBird;

import Head from "next/head";

...

 <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
         </Head>
    </>
    
    ...

저작자표시 비영리 변경금지

BlockGun

틀 만들기

components 폴더 생성

pages 하위 파일 수정

출력 페이지 예시

Layout 수정

코드 일원화를 위한 npm 설치

front 에 es.eslintrc.json 파일 생성

스타일드 컴포넌트, antd 설치

댓글

티스토리툴바