Loading...

[React, NextJS] Module parse failed: Unexpected character '' (1:0) 에러 수정 및 Next에서 이미지 import 되도록 설정

오늘 기능 좀 만들어볼까 했더니 Module parse failed: Unexpected character '' (1:0) 에러가 떠서 몇 시간 동안 헤맸다. 기본적으로 nextjs의 최근 버전에서 import/export로 이미지를 불러오는 것을 지원하지 않는 것 같고 next-image라는 것을 따로 설치하여 설정을 해준다. 이에 따라 next-image 밑 next.config.js 설정을 해줘도 위의 에러는 사라지지 않았다. stackoverflow에서는 webpack 얘기가 등장하는데 다른 사람들은 안해줘도 되던데 나는 해줘야되나? 싶어서 다른 해결방법을 찾아봤는데 결론은.. 결국 webpack.config.js에서 file-loader 설정을 해줘야된다. (이 에러가 난 사람이라면 필수) 왜 ..

[React, Nextjs] nextjs 에 emotion 설치 (react cra 동일)

설치 설치 yarn add @emotion/react @emotion/styled yarn add --dev @emotion/babel-plugin .babelrc 파일 생성 및 내용 추가 { "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] } 글로벌 스타일 적용 및 스타일 적용 예제 style.js 파일 생성 (이름은 상관없음) import { css, Global, keyframes } from '@emotion/react' import styled from '@emotion/st..

[Next.js 설정] Next에 Typescript 도입하기

1. yarn create next-app 프로젝트이름 => next 프로젝트 생성 2. 아래 글을 참고해서 typescript 관련 파일 설정한다. 아래 글에 나온 것 외에 아래 명령어로 두 개를 추가로 설치해줘야 동작한다. '@zeit/next-typescript' 의 경우 타입스크립트가 이제 내장되어 필요없다는 문구가 터미널에 나오길래 없앴는데 babelrc등을 설정하려면 결국 설치해줘야했다. 추가로 webpack을 설정할 경우에도 필요한 것 같다. 나는 아래 글을 보고 .prettier.js (탭 띄어쓰기, ''로 따옴표 통일, ',' 자동 붙여주기 기능 제공) 등도 같이 설정해줬다. yarn add --dev @zeit/next-typescript @babel/core tlog.tammolo.c..