반응형 NextJS5 nextJS svg 불러오기가 안될 때 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack: config => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig; 2023. 4. 26. NextJS에서 유튜브 썸네일사용하기 구현 내용 NextJS 화면을 구현을 하는 도중에 아래와 같은 화면을 구현했어야한다. 고민을 해보고 iframe으로 구현을 하면 되겠다라고 생각을 했다. NextJS에서 구현을 할 때 외부 URL을 불러오고 뿌려주고 하는 부분이 익숙하지 않아서 삽질을 했다. NextJS에서 외부 링크로 이미지를 불러오거나 할 때 next.config.js파일에 URL를 추가해줘야한다. next.config.js 파일 수정 img.youtube.com 를 추가해주었다. 간략하게 설명을 하자면 img.youtube.com는 유튜브의 썸네일을 불러오기 위한 주소이다. /** @type {import('next').NextConfig} */ const nextConfig = { ... images: { domains: [ 'l.. 2022. 11. 30. NextJS Svg 못 읽어오는 경우 해결 에러내용 # Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 해결 타입스크립트까지 정리를 해두려고 한다. 패키지 설치 $ npm install --dev @svgr/webpack next.config.js 파일 수정 //next.config.js const nextConfig = { ... webpack: config => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return co.. 2022. 11. 29. Unknown at rule @tailwind 경고 해결 global.css에 @tailwind base;를 사용하면 ESLint에서 경고가 나오는 경우가 있다. 아래의 코드는 tailwind 를 적용할 때 필수 코드이다. 해당 적용하게되면 eslint에서 경고가 발생을 한다. //global.css /** * This injects Tailwind's base styles and any base styles registered by * plugins. */ @tailwind base; /** * This injects Tailwind's component classes and any component classes * registered by plugins. */ @tailwind components; /** * This injects Tailwind's u.. 2022. 11. 28. 이전 1 2 다음 반응형
