CSS Next.js에서 css를 사용하는 가장 간단한 방법을 알아보자. layout.js를 보면 import './globals.css' 가 있는 걸 볼 수 있다. layout.js는 루트 레이아웃이기 때문에 어떤 페이지에 방문하던 간에 globals.css 파일이 로드되게 된다. 따라서 전역적으로 디자인을 적용하고 싶다면 globals.css 파일에서 설정하면 된다. 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/5098 Next.js 13 - 생활코딩 수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다 o..

정적 자원 Next.js에서 이미지와 같은 정적인 컨텐츠를 사용할 때는 어떻게 하면 될까? public이라는 폴더가 있는데 여기에 이미지 파일을 위치시키면 된다. 파일을 읽어오고 싶을 때는 img 태그에서 src를 /{image_name} 로 하여 사용하면 된다. 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/5098 Next.js 13 - 생활코딩 수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다 opentutorials.org

Server Side Rendering SSR - Next.js 를 사용하면 좋은 것. 개발자 도구를 켜고 메뉴에서 run command를 클릭하면 disable javascript라는 메뉴가 있다. 이걸 누르면 JS가 꺼지게 된다. React는 JS 기술이기 때문에 JS가 동작하지 않으면 웹페이지가 아예 렌더링되지 않는다. 하지만 Next.js로 만든 웹페이지는 리로드 해도 렌더링이 잘 된다. 이것이 어떻게 가능한가? 사용자가 요청하면 next.js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다. Next.js는 JS가 아닌 HTML을 응답한다. 따라서 잘 동작하는 것이고 검색엔진 최적화에 좋다. disable javascript를 실행했다면 다시 e..

Next.js 뼈대 만들기 만약 이전 글을 보고 start가 실행 중이라면 끄고 dev를 다시 실행하자. 웹을 소개하는 튜토리얼 사이트를 만들어본다고 하자. 처음에 접속하면 웰컴 메시지를 보여준다고 할 때 이 컨텐츠는 어디서 가져올까? 바로 src/page.tsx가 리턴하는 값이다. 이 컨텐츠만이 아니라 어떤 페이지로 이동할 수도 있다. 그런데 어떤 페이지를 이동하던 공통된 내용을 가지고 있다면 공통된 내용을 다루는 src/layout.tsx에서 관리하는 것이 훨씬 더 효율적이다. 아래와 같이 뼈대를 만들어 CRUD를 위한 기본 틀을 만들 수 있다. // /src/app/page.tsx import Image from 'next/image'; export default function Home() { r..

Next.js 배포 방법 크롬 개발자 도구(F12)에서 Network 탭을 열고 refresh(F5)를 하면 아래 resource 용량이 나온다. 6.5MB는 매우 큰 용량이다. 그리고 콘솔창을 보면 개발에 필요한 여러 정보가 출력이 되는데 이건 비효율적이고 보안상의 문제가 있을 수 있다. 따라서 용량을 더 작게 줄이고 불필요하나 메시지를 출력하지 않는 실서버에 최적화된 버전이 필요하다. { "name": "next-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "..

Next.js 기본 구조 Next.js에서 기본적으로 제공되는 샘플 앱이 존재할 것이다. /src/app/layout.tsx - 기본적인 웹페이지의 골격을 구성한다. // /src/app/layout.tsx import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function Root..