Next.js 프로젝트 셋업 하기
- front/react
- 2022. 10. 1.
SHORTCUT
반응형
Getting Started | Next.js
Welcome to the Next.js documentation! If you're new to Next.js, we recommend starting with the learn course. The interactive course with quizzes will guide you through everything you need to know to use Next.js. If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.
1️⃣ 설치하기
- 프로젝트 생성을 원하는 폴더로 이동하여, 터미널을 연다.
- 아래의 명령어를 입력한다.
npx create-next-app@latest
- 원하는 프로젝트명을 입력하면, 자동으로 생성 및 관련 라이브러리 및 디펜던시를 설치해준다.
2️⃣ 실행하기
yarn devvscode/터미널 에서 yarn dev 명령어를 입력하여 프로젝트를 실행한다http://localhost:3000 로 접속하면 아래 사진처럼 정상적으로 사이트가 로드됨을 확인 할 수 있다.
⌨️ 실행되는 파일은?
_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp최초엔 _app.js 파일이 실행되며, 내부에 존재하는 컴포넌트를 실행하는 형태로 되어 있습니다.
위 파일에서 글로벌 스타일(globals.css)을 정의할 수 있습니다.
next.js/_app.tsx at canary · vercel/next.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters You can't perform that action at this time. You signed in with another tab or window.
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
...
</main>
<footer className={styles.footer}>
...
</footer>
</div>
)
}이후 pages 폴더에 존재하는 index.js 파일을 랜더링합니다.
위 js파일이 정상적으로 랜더링되어 위와 같은 Welcome 페이지를 브라우저에 표시하여 줍니다.
위의 파일에서 head에 meta 태그 등을 선언할 수 있고, 이런 과정을 통해 SEO 최적화를 가능하게 해줍니다.
next.js/index.tsx at canary · vercel/next.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters You can't perform that action at this time. You signed in with another tab or window.
반응형