반응형
프로젝트 생성
mkdir nextjs-demo; \
cd nextjs-demo; \
npm install -y; \
npm install --save react react-dom next;스크립트 설정 추가
- 경로 : ./nextjs-demo/package.json
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}icon.png 추가
- 경로 : ./nextjs-demo/public/image/icon.png
_app.js 추가
- 경로 : ./nextjs-demo/pages/_app.js
import Head from 'next/head'
const App = ({Component, pageProps}) => {
return (
<>
<Head>
<title>기본 페이지 타이틀</title>
<meta name={'description'} content={'기본 페이지 설명'}/>
<link rel={'icon'} href={'/image/icon.png'}/>
</Head>
<Component {...pageProps} />
</>
);
}
export default App;index.js 추가
- 경로 : ./nextjs-demo/pages/index.js
import Link from 'next/link';
const Index = () => {
return (
<div>
<Link href={'/about'}>About Page</Link>
<h1>Hello next.js</h1>
</div>
);
};
export default Index;about.js 추가
- 경로 : ./nextjs-demo/pages/about.js
const About = () => {
return (
<div>About</div>
);
};
export default About;실행
로컬에서 실행
npm run dev운영 환경에서 실행
npm run build
npm run start접속
참고
반응형
'Development > Nextjs' 카테고리의 다른 글
| [Nextjs] Docker로 빌드 및 배포하기 (0) | 2024.02.08 |
|---|---|
| [Nextjs] SSR(Server Side Rendering) (0) | 2024.02.08 |
| [Nextjs] Router (0) | 2024.02.08 |
| [Nextjs] Style (0) | 2024.02.08 |