키모스토리

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] = ..

페이지주소 뒤에 파라메터를 이용한 Route 방식 하위 폴더명을 대괄호를 이용해서 작성 => [id]  /app/(movies)/movies/[id]/page.tsx 요청 URL:  http://localhost:3000/movies/1 params, searchParams export const metadata = { title: 'Movie Detail',}export default async function MovieDetail({ params, // [id] 폴더이름 searchParams, // ?key=value&key=value 형식}: { params: Promise; searchParams: Promise; }) { const {id} = await params; const ..

html 문서의 metadata 데이터를 관리/app/layout.tsx 에 있는 내용이 모든 문서에 병합되어 등록됨 예) /app/layout.tsx 의 metadata  에 description 데이터를 등록export const metadata = { description: 'The best movies on the best',} /app/(home)/page.tsx  안에 metadata 코드를 추가 하면서 title 만 등록export const metadata = { title: 'Home | Next Movies',}export default function Page(){ return ( Hello NextJs!! )} - 아래 결과처럼 title..

layout.tsx Next.js 의 모든 페이지(page.tsx) 들은 layout.tsx를 시작으로 조립 되어 실행됨  (LIke index.js, index.html) export const metadata = { title: 'Next.js', description: 'Generated by Next.js',}export default function RootLayout({children, }: { children: React.ReactNode}) { return ( {children} )} 이전 예제에서 /app/page.tsx, /app/about-us/page.tsx 에 import 했던 Navigation 을 layout.tsx 에서 한번만 import 하면모..

원본문서 : Next.js에서의 렌더링 방식 https://voyage-dev.tistory.com/130 Pre-Renderig이란?일반적인 React를 사용한 웹 어플리케이션은 CSR 렌더링 방식을 사용하며, 이는 처음에 브라우저가 빈 HTML 파일을 받아 아무것도 보여주지 않다가, JavaScript가 다운로드 완료되 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다.하지만 Next.js는 모든 페이지를 사용자에게 전해지기 전에 미리 렌더링 즉, Pre-Render 한다. 이는 Next.js가 모든 일을 클라이언트 측에서 모든 작업을 수행하는 것이 아니라, 각 페이지의 HTML을 미리 생성하는 것이다.생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 그후 브라..

navigation app/components 폴더 생성 후 navigation.tsx 파일 생성 후 아래 코드 코딩'use client'import Link from "next/link";import { usePathname } from "next/navigation";export default function Navigation() { const path = usePathname(); console.log(path); return ( Home {path === "/" ? "💖" : ""} About-us {path === "/about-us" ? "💖" : ""} ..

1. 프로젝트 폴더 생성 후  npm init-ynpm init -y root/tsconfig.json 파일 생성됨 2. 필수 라이브러리 설치npm install react@latest next@latest react-dom@latest * pakage.json 수정 (scripts 필드){ "name": "nextjs", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" // npm run dev 명령어로 컴파일 실행이 되도록 설정 }, "keywords": [], "author": "", "license": "MIT", "description": "", "dependencies": { "next..