[Hanaro] 33일차 / Next.js 시작하기, 프로젝트 생성

05 Next.js (v14) 시작하기

• Next.js란
  • React 기반 풀스택 웹 개발 프레임워크
  • PageRouter, AppRouter
  • Multiple Rendering Types (SSG, CSR, SSR, ISR)
  • TailwindCSS, TypeScript, Optimization(Image, Font, Scripts, Core Web Vitals)
• Next Rendering Methods
  • SSG (Static Site Generation)
    • Build시 미리 생성 (getStaticProps)
  • SSR (Server Side Rendering)
    • 요청(request)시 생성해서 응답 (getServerSideProps)
  • ISR (Incremental Static Regeneration)
    • SSG를 점진적으로 수행 (유효기간, 갱신기간 등)
  • CSR (Client Side Rendering)
    • Client(Browser)에서 JS를 실행하여 화면 처리 (SEO에 불리)
    • SSG, SSR, ISR과 조합하여 실행 (Client Component)
• React Server Components
  • RSC (React Server Components)
  • RCC (React Client Components)

 

 

06 Next.js - Project 생성 및 설정

• 프로젝트 생성
  • cmd 창 프로젝트 위치에서 npx create-next-app@latest

    • 

• 프로젝트 실행
  • cmd 위에서 만든 project name 으로 이동
  • yarn lint
  • yarn dev
  • http://localhost:3000/ 접속
• 기타
  • prettier 설치
    • cmd 창 project name 위치에서 npm i -D prettier eslint-config-prettier
    • package.json 파일의 scripts 블록 안에 "prettier": "prettier --write .” 추가
    • .eslintrc.json 파일의 extends 안에 "prettier" 추가, extends 아래에 "rules": { "no-unused-vars": "error" } 추가
    • .prettierrc 파일 생성 후 아래 코드 추가

      • {
          "singleQuote": true,
          "jsxSingleQuote": true,
          "semi": true,
          "tabWidth": 2,
          "trailingComma": "es5"
        }

    • cmd 창 project name 위치에서 yarn prettier
    • cmd 창 project name 위치에서 npm i -D @trivago/prettier-plugin-sort-imports
    • .prettierrc 파일 하단에 아래 코드 추가

      •   "plugins": ["@trivago/prettier-plugin-sort-imports"],
          "importOrder": [
            "^next$",
            "^next/\\w*$",
            "^next/(.*)$",
            "^react$",
            "^react/(.*)$",
            "^@/lib/(.*)$",
            "^[./]"
          ]

  • .eslintrc.json 파일 등에서 Unable to load schema 에러 발생 시
    • Settings- Http: Proxy Support 검색 후 off로 변경

      • 

    
    
    • 또는 Settings- default formatter 검색 후 Prettier ESLint로 변경

      • 

       
     

 

07 Next.js - Layout, Template, Page, Route, Link

• Link
  • 기본 형태 <Link href=”…”>button</Link>
    • ex) <Link href=”/” scroll={false} type=”button”>Home</Link>
  • a tag는 자동 생성
• useRouter
  • import { useRouter } from 'next/navigation';
  • const router = useRouter();
• usePathname
  • import { usePathname } from 'next/navigation’;
  • const pathname = usePathname();
• redirect
  • import { redirect } from 'next/navigation’;
  • if (…) redirect('/login');

 

 

08 Next.js - Routes

• Dynamic Routes
• Nested Dynamic Routes
  • /shop/[…slug]: /shop/page.tsx
  • /shop/[[…slug]]: /shop/[[…slug]/page.tsx
• @parallel Routes
• Intercepting Routes
  • • • •