dahye8043
100
2021-11-06 11:16:58 작성 2021-11-06 11:21:09 수정됨
1
105

nextjs Prop `className` did not match.오류


next.js와 express를 연동하여 개발중인데 특정 페이지에서만 오류가 뜨네요

스타일링은 styled-components 사용하고 있고 바벨 설정도 다 해놨는데 다른 컴포넌트나 페이지에서는 잘 되는데 page/blogs/[id].js 페이지에서만 안되네요 ㅠㅠ

폴더 구조는 루트폴더에서 두개로 나눠 client 디렉토리에서 nextjs 작업하고 있고 

server디렉토리에서  express 코드 작성한걸 넣어뒀어요

저기 빨간 동그라미한 페이지에서만 저런 오류가 떠요 ㅠㅠ 

page/blogs/[id].js 전체코드


import axios from 'axios';
import React, { useCallback, useEffect, useState } from 'react';
import SearchContents from '../../components/SearchContents';
import styled from 'styled-components';
import { BsSearch } from 'react-icons/bs';
import { useRouter } from 'next/router'
const Wrap = styled.div`
  background: #000;
  display: flex;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;
const Btn = styled.button`
  border: none;
  background: #ff79a2;
  width: 50px;
  height: 100%;
  cursor: pointer;
  &:hover{
    background: #e6a3b9;
  }
`;
const InputBox = styled.div`
  display: flex;
  width: 70%;
  height: 40px;
  justify-content: center;
`;
const InputText = styled.input`
  border: none;
  border-bottom: 2px solid #ff79a2;
  background: transparent;
  outline: none;
  font-size: 18px;
  color: #fff;
  width: 40%;
  height: 100%;
`;

const index = ({post}) => {
  const router = useRouter();
  const [Posts, setPosts] = useState([]); 
  const [Value, setValue] = useState('');
  const onChange = useCallback((e) =>{
    setValue(e.target.value);
  },[Value]);

  const onClick = ()=>{
    if(Value){
      router.push(`/blogs/${Value}`); 
    }
  }
  
  return (
    <Wrap>
      <InputBox>
        <InputText type="text" placeholder="레시피 검색" value={Value} onChange={onChange} />
        <Btn onClick={onClick}><BsSearch /></Btn>
      </InputBox>
      <SearchContents />
    </Wrap>
  );
};

export const getServerSideProps = async(context)=>{
  const {id} = context.params;
  const name = encodeURI(id);
  const res = await axios.get(`http://localhost:5000/api/blogs/${name}`);
  const data = await res.data;
  return {
    props: {
      post: data
    }
  }
}

export default index;


.babelrc


{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}
 


서버쪽 응답하는 코드


require('dotenv').config();
const express = require('express');
const router = express.Router();
const axios = require('axios');
const client_id = process.env.CLIENT_ID;
const client_secret = process.env.CLIENT_SECRET;
router.get('/blogs/:value',async(req, res)=>{
  try{
    const url = await `https://openapi.naver.com/v1/search/blog.json?query=${encodeURI(req.params.value)}`;
    const request = await axios.get(url, {headers: {'X-Naver-Client-Id':client_id, 'X-Naver-Client-Secret': client_secret}});
    return res.json({posts: request.data});
  }catch(e){
    return res.json({data: e});
  }
})
module.exports = router;


0
  • 답변 1

  • dahye8043
    100
    2021-11-06 11:33:43

    따로 컴포넌트 만들어서 불러오는 방법으로 하면 잘되네요. .!

  • 로그인을 하시면 답변을 등록할 수 있습니다.