24.07.29 Nextjs로 리액트프로젝트 생성하기

1. 프로젝트를 진행할 폴더를 생성한다.

2. 해당 폴더를 vscode로 연다.

 

3. 아래 코드를 터미널에 입력하여 package.json파일을 생성한다.

npm init -y

 

4. react, next, react-dom 설치

npm install react@latest next@latest react-dom@latest

 

5. pakage.json 수정

{
    "name": "nextprac",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "next dev"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "description": "",
    "dependencies": {
        "next": "^14.2.5",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
    }
}

 

6. app폴더 속 page.tsx(jsx)생성

반드시 app폴더 속 page파일이어야함. next 프레임워크에서 필요로하는 방식이기 때문

 

7. page 컴포넌트 생성

//app/page.tsx
export default function Tomato() {
    return <h1>Hello NextJs!</h1>;
}

오류가 있다고 하지만 괜찮다.

 

8. npm run dev 실행

npm run dev

타입스크립트를 사용하려고 했지만 타입스크립트, react-ts, node-ts가 없기 때문에 자동으로 설치가 된다.

 

9. 로컬사이트 이동

해당 주소를 컨트롤 좌클릭하면 페이지가 열린다.

app폴더에는 NextJs가 생성한 layout.tsx파일도 생성되어있다.

 

10. 테스트

텍스트를 고쳐보고 브라우저에 적용되는지 확인해본다.