Next (8) 썸네일형 리스트형 [Next.js] globalsStyle, customApp next.js에서 globalsStyle을 적용하려면 appComponent를 custom해줘야 한다. 기본적으로 숨어져있는 app을 수정하려면 1. pages에 _app.js를 만들어야한다. 2. _app.js에서 App component를 생성하고, Component와 pageProps를 parameter로 받은 후 불러와준다. export default function App({ Component, pageProps }) { return ( ); } 3. 그 후 styles폴더안의 globals.css 를 불러온다. (module이 아닌 css는 커스텀app에서만 불러올 수 있음) import "../styles/globals.css"; export default function App({ Comp.. [Next.js] next.js css - module NavBar.js NavBar.module.css 처럼 모듈을 만들어서 import 해준다. 사용할 컴포넌트 안에서 style jsx를 열어주고 css를 적기만하면 끝난다. → import 하지 않아도되는 장점과 클래스네임을 일일히 기억할 필요가 없는 장점이 있음. module.css와 마찬가지로 다른 컴포넌트에서 같은 이름을 사용해도 겹치지 않는다. → 무작위로 추가적인 클래스네임이 생성되기때문 → 변수이름짓는데 자유로워지며 충돌을 피할 수 있는 장점이있다. .active { color: tomato; } .link { text-decoration: none; } import styles from "./NavBar.module.css"; Home About // 백틱으로 여러개의 스타일을 주는방법과 배.. [Next.js] React와의 차이점 설치하기 npx create-next-app@latest . —typescript React : Library, CSR Next : Framework, SSR React와 다르게 라우팅 등 기본적으로 나오는 것들은 없지만, 지정된 장소에 코드를 작성하면 자동으로 코드를 불러온다. ex) pages폴더안에 원하는 컴포넌트 제목을 작성하면 자동으로 라우팅된다. React처럼 자유로운 수정은 불가능하다. React는 오류페이지를 작성해야하지만, Next는 default page 존재.(수정가능) React : 브라우저가 유저가 보는 모든 UI를 만든다. 브러우저가 js를 가져와서 그 js가 모든 ui를 만든다. html은 비어있는 하나뿐이다. (느린 연결에서 큰 단점이 생김) Next : html이 존재하므로.. [Next.js] useLocation, useNavigate, useRouter in Next react-router-dom의 useLocation, useNavigate, useRouter 의 기능을 Next.js에서는 'next/router'의 useRouter 로 구현할 수 있다. import { useRouter } from "next/router"; ... const router = useRouter(); useEffect(() => { if (window.location.href.includes("access_token")) { window.localStorage.setItem( "token", window.location.href.split("=")[1].split("&")[0] ?? "none", ); router.push("/"); } }, []); [Next.js] svg component in Next 1. webpack 설치 npm install -D @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; 3. 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 4. tsconfig.json 수정 "include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "*.. [Next.js] Styled-Components in Next 1. styled-components 설치 npm i styled-components npm i @types/styled-components 2. babel 설치 npm install babel-plugin-styled-components npm i babe-preset-next 3. 프로젝트 루트 폴더에 .babelrc 파일 생성 { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } 4. .eslintrc.json 설정 { "extends": ["next/babel", "next/cor.. Next.js next/Link in React import { Link } from "react-router-dom"; 회원가입 in Next import Link from "next/link"; 회원가입 Next.js Link Error 해결 - Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Next Link Error Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - Next/Link의 children으로 component를 줬을때 생기는 error 입니다. 1. component를 a tag로 감싸줍니다. 2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다. https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component next/link | Next.js Enable.. 이전 1 다음
