데이터와 동고동락 중인 개발자 입니다.

react 실행을 했을 때 해당 오류를 볼 수 있습니다.

1. npm 재설치

npm cache clean --force
rm node_modules
npm install

혹은

npm update
node_modules 폴더 삭제
package-lock.json 삭제
npm cache clean --force
npm install

해당 경고창이 무수하게 떠서 무엇인지 알아보았습니다.

기본 내보내기는 더 이상 사용하지 않는다는 내용입니다.

1. import 수정

import create from'zustand'

import { create } from'zustand'

하단의 내용으로 수정하면 경고창이 말끔히 사라집니다. : )

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

참고하여 Next.js에 Navigate 기능인 Link를 달아보려고 합니다.

1. pages/posts/first-post.jsx를 생성해줍니다.

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

2. index.js 편집

<h1 className="title">
	Read <Link href="/posts/first-post">this page!</Link>
</h1>

[this page] 클릭하면

서버통신이 없이 빠르게 이동하는  것을 확인할 수 있습니다.

Setup - Create a Next.js App | Learn Next.js (nextjs.org)

참고하여 Next.js를 이용한 프로젝트를 만들어보려고 합니다.

1. 프로젝트 생성

# 프로젝트 세팅
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

# 폴더 접근
cd nextjs-blog

# 프로젝트 시작
npm run dev

2. 기본 구성 확인

react 프로젝트를 실행할 때 간혹 Error: Cannot find module .... 라는 오류를 보게 됩니다.

해결방법

# 명령어로 캐시를 삭제
npm cache clean --force

# node_modules 폴더 삭제
# package-lock.json 파일 삭제

# 재설치
npm install

Next.js란 React로 만드는 서버사이드 렌더링 프레임 워크 입니다.

서버사이드 렌더링으로 얻게 되는 이점

1. 사용자가 웹을 보기까지의 대기 시간이 줄어듭니다.

2. 자바스크립트 로그가 되지 않아도 페이지 일부가 표출이 되어 구글 검색엔진에 걸릴 수 있습니다.

1. Next.js project 만드는 법

npx create-next-app <project name>