JavaScript/Next.js 썸네일형 리스트형 Next.js Scripts "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } dev - Next.js를 development 모드로 실행 (.next과 이외 파일들을 참조) build - 프로덕션 사용을 위한 애플리케이션을 빌드, 결과물: build/.next/ start - 빌드된 .next를 실행(build/.next를 실행) 즉 개발모드에선 dev를 실행하면 되고, 배포할 경우 build를 통해 .next 폴더를 최적화 한 후 yarn start를 통해 빌드된 .next를 실행시킨다. Next.js 에서 https 사용법 1. 터미널에 아래와 같이 입력 openssl req -x509 -out localhost.crt -keyout localhost.key \ -newkey rsa:2048 -nodes -sha256 \ -subj '/CN=localhost' -extensions EXT -config { http((req, res) => { const parsedUrl = parse(req.url, true); handle(req, res, parsedUrl); }).listen(ports.http, (err) => { if (err) throw err; console.log(`> HTTP: Ready on http://localhost:${ports.http}`); }); https(httpsOptions, (req, .. React.js와 Next.js의 서버 배포 차이 Next.js는 React의 SSR 프레임워크이다. React는 아래의 과정으로 서버에 배포를 한다. 1. 소스를 webpack으로 build 2. 추출된 dist파일을 서버에 복사 3. static 이미지 경로 설정 app.use(express.static(path.join(__dirname, 'public'))); 4. / 이외의 url에서 접근해도 index.html을 바라보도록 설정 app.get('*', function (req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); 5. index.html를 서버에 띄우기 React는 빌드된 파일이 index.html, bundle.js, assets으로 간단하지만 Next.. Next.js "window,document is not defined" 해결하는 법 https://sumini.dev/issue/000-nextjs-window,document-is-not-defined/ Next.js "window,document is not defined" 해결하는 법 Next.js 개발환경에서 window object를 사용할 때, document is undefined, Cannot read innerWidth of undefined 등의 에러메세지를 마주할 때가 있다. Next.js… sumini.dev [next.js] setting init 1. 터미널에 명령어를 순서대로 작성 nvm use 14.15.5 yarn init -y yarn add react react-dom next 2. package.json "scripts": { "start": "next" "build": "next build" }, pages 폴더 생성 pages 폴더 생성해서 index.tsx 파일 만들기 scss loader 설정 yarn add classnames sass --save --dev [파일명].module.scss typescript 1. 루트 디렉토리에 next-env.d.ts 파일을 만들기 2. package 설치 yarn add --dev typescript @types/react @types/node 3. 파일들을 .tsx 파일로 변경.. [next.js] 맵핑되지 않는 라우터 404페이지 노출 대신 redirect 하는 법 pages/404.js import { useEffect } from "react" import { useRouter } from "next/router" import { TEMPLATE_MODEL } from "../common/constants/Template"; export default function Custom404() { const router = useRouter() useEffect(() => { router.replace(`/${TEMPLATE_MODEL}`); }) return null } Next.js에서 node_modules를 정상적으로 못 불러올 경우 nextjs.org/docs/advanced-features/dynamic-import Advanced Features: Dynamic Import | Next.js Dynamically import JavaScript modules and React Components and split your code into manageable chunks. nextjs.org dynamic import로 불러오면 정상적으로 불러와진다. 이전 1 2 다음