키모스토리

1. 빌드 Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.npm run build명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.빌드시 오류 발생이 되면 문제 점 확인 후 수정 2. 실행 npm run start빌드 버전으로 실행하여 테스트 3. 소스코드를  github에 pushgit push origin master 4. 배포 (with vercel)Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 빌드와 배포 그리고 호스팅을 해주는 서비스를 제공한다.Vercel 장점자동화된 배포: 코드 변경 사항이 GitHub, GitLab, Bitbucket 등..

Tailwind CSS(opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.Install Tailwind CSS with Next.js4.0 버전 변경된 방식 (With Next.js)Install Tailwind CSSnpm install tailwindcss @tailwindcss/postcss postcss Configure PostCSS Pluginspostcss.config.mjs 파일을 root에 생성하고 아래 내용 작성postcss.config.mjsconst config = { plugins: { "@tailwindcss/postcss": {}, },};export default config; Import Tailwind C..

프로젝트 전체에 대한 global css를 적용하고 싶다면 먼저 global.css를 작성 (1) /app/styles/global.css 생성 reset css 를 포함하여 프로젝트 전체에 적용할 스타일을 작성https://meyerweb.com/eric/tools/css/reset//* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn,..

예를 들어 #8에서 테스트 했던 코드중에 MovieVidios fetch 를 처리 하는 도중 오류가 발생했을 경우해당 페이지 전체는 오류로 인해 페이지를 표시 할 수 없게 된다. 이때 error.tsx파일을 이용하여 애러를 처리 할 수 있다 (movies)/movies/[id]/page.tsx import { Suspense } from "react";import MovieInfo from "../../../components/movie-info";import MovieVideos from "../../../components/movie-videos";export const metadata = { title: "Movie Detail",}export default async function MovieD..

페이지에서 여러개의 api를 호출해야 하는 경우 동시에 병렬요청하는 방법import { API_URL } from "../../../(home)/page";export const metadata = { title: "Movie Detail",}async function getMovie(id:string) { console.log(`Fetching movies: ${Date.now()}`); await new Promise((resolve) => setTimeout(resolve, 2000)); const response = await fetch(`${API_URL}/${id}`); return response.json();}async function getVideos(id:string) { c..

Client Side Fetch"use client" 키워드 필요- 클라이언트에서 페이지 render 후에 useEffect를 이용하여 fetch 를 요청해서 ui를 다시 render 함- use client 를 선언해야 했기 때문에 meta data 도 해당 페이지에 적용 할 수 없음- React App API DB "use client"import { useEffect, useState } from "react"// use client 선언으로 metatdata 사용불가가// export const metadata = {// title: "Home Page",// }export default function HomePage() { const [isLoading, setIsLoading] = ..