인프런 커뮤니티 질문&답변

song

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

_app.js와 Head

질문과 에러

작성

208

궁금한 점이 꼭 page 내에 ".app.js" 라고 이름을 명시한 파일에

공통 레이아웃 부분을 다뤄야 하는거죠 ?

추가적으로 AppLayout.js 와 .app.js와는 어떤 차이가 있나요 ?

ㅜㅜ

저는.. ant-Design 적용 후에 이런식으로.. 뜨는데..

(설명할 방법이 없어서 영상으로 띄웁니다..)

무엇이 문제인지 모르겠습니다 ..ㅜㅜ text 형식으로 출력되는게 아니라 계속 깜빡거립니다.. 크롬에서도 사파리 에서도 똑같이 뜨네요 ㅜㅜ

express redux nodejs react Next.js

답변 5

송지훈

좀 더 자세한 코드를 보여주셔야 정확한 답변이 가능하지 싶어요.

아래 코드 보고 비교해보실래영?

// AppLayout.js 부분
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';
import UserProfile from './UserProfile';
import LoginForm from './LoginForm';
import styled from 'styled-components';

const SearchInput = styled(Input.Search)`
  vertical-align: middle;
`;

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <>
      <Menu mode="horizontal">
        <Menu.Item>
          <Link href="/">
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/profile">
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <SearchInput enterButton />
        </Menu.Item>
        <Menu.Item>
          <Link href="/signup">
            <a>회원가입</a>
          </Link>
        </Menu.Item>
      </Menu>
//_app.js 부분
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import 'antd/dist/antd.css';

const Nodebird = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
      </Head>
      <Component />
    </>
  );
};

Nodebird.propTypes = {
  Component: PropTypes.elementType.isRequired,
};

export default Nodebird;