nextjs Prop `className` did not match.오류

Question

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 ( ); }; 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;

dahye8043 · Answer

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

nextjs Prop `className` did not match.오류

1개의 답변

#props 목록