NextJs
-
Warning: Prop `className` did not match.NextJs 2022. 12. 25. 20:06
방법1 nextjs폴더에 ".babelrc"파일을 만들고 아래의 내용을 넣는다 { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] } 방법2 next.config.js파일에 compiler내용을 추가한다. // next.config.js module.exports = { compiler: { // Enables the styled-components SWC transform styledComponents: true } }
-
Nextjs Route 여러 이름 라우팅NextJs 2022. 12. 21. 17:16
'vegetable1/[name1].tsx' import { useRouter } from 'next/router'; const App1 = () => { const {query:query1} = useRouter(); return ( vegatable1 folder name1: {query1.name1} ); }; export default App1; 실행결과 http://localhost:3000/vegetable1/fff http://localhost:3000/vegetable1/asdf111 param받기 Ex http://localhost:3001/vegetable2/kim?nick=king import Link from 'next/link'; import { useRouter } from 'n..
-
Nextjs RoutingNextJs 2022. 12. 20. 02:44
파일 기반 라우팅 nextjs는 파일기반으로 라우팅을 한다. Nextjs 폴더 기능 리액트에서는 라우트를 위해서 'react-router'라는 라이브러리를 사용하여 라우팅 설정을 해줘야 한다. 페이지 경로에 대하여 직접 설정을 해줘야 한다. 넥스트는 파일 시스템 기반 라우팅을 사용한다. 폴더명 또는 파일명에 따라 웹 페이지 경로가 설정되어 관리가 편하다. ex: index.tsx는 '/'(root)가 되고 test1.tsx는 '/test1'가 될 수 있다. /test/index.tsx와 /test.tsx가 동시 있을 경우 폴더속 index.tsx가 우선한다.
-
Nextjs LinkNextJs 2022. 12. 20. 02:34
import Link from "next/link"; const Test1 = () => { return ( Test1 ); } const App1 = () => { return ( Test Link1 AnkerType LinkType ); } export default App1; 실행화면 Link방식은 a tag방식과 달리 url이동시 전체를 다시 불러오지 않기에 화면전환이 빠르다. 백그라운드에서 페이지를 미리가져오는 기능이 기본적으로 작동된다(끌수 있다). 브라우저의 HistoryApi를 사용하기에 뒤로가기를 하면 이전에 렌더링된 화면을 보여주는 방식이다. SEO(검색엔진)에는 a tag방식 보다 불리하다. React component에 라우팅 기능을 주고싶다면 a tag를 사용해야 한다.