Next.js는 React.js 기반의 서버사이드 렌더링을 지원하는 프레임워크입니다. 기존의 React.js에서는 SPA(Single Page Application)를 만드는 것이 일반적이었습니다. 하지만 SPA의 단점 중 하나는 초기 로딩속도가 느리다는 것입니다. 이러한 단점을 보완하기 위해 SSR(Server Side Rendering)을 사용하면 페이지 로딩 속도가 빨라지고 SEO(Search Engine Optimization)에 좋은 효과를 가져옵니다.
또한, Next.js는 정적 사이트 생성 기능도 제공하며, TypeScript와 같은 다른 언어와 함께 사용이 가능합니다. 이러한 다양한 기능과 편의성이 있는 Next.js는 최근 웹 프론트엔드 개발에서 매우 인기 있는 프레임워크 중 하나입니다. 따라서 Next.js를 공부하면 웹 프론트엔드 개발자로서 역량을 높일 수 있으며, 빠르게 구축할 수 있는 프로젝트에서 유용하게 사용할 수 있습니다.
Next.js 설치 방법
Next.js를 사용하기 위해서는 먼저 Node.js를 설치해야 합니다. Node.js가 설치되어 있다면, 다음 명령어를 실행하여 Next.js를 설치합니다.
| Node.js 설치방법 |
| Node.js 설치: 먼저 컴퓨터에 Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있지 않은 경우, https://nodejs.org/en/ 에서 Node.js를 다운로드하고 설치하세요. |
npx create-next-app [프로젝트 이름]
이 명령어를 실행하면, Next.js 프로젝트를 위한 새로운 디렉토리가 생성되고, 필요한 모듈과 구성 파일이 설치됩니다.
그리고 처음에 page.js / globals.css 파일에 기본 코드들이 작성되어 있을껀데, 이건 모두 삭제해주셔도 됩니다.
기본적으로 리액트 언어와 동일하기 때문에 기본 문법은 익히고 시도하는 것을 추천하지만, 저도 기본을 아무것도 모릅니다! 하면서 배울꺼거든요! 하지만 포스팅 할 때는 코드가 잘 작동하는지 검증하고 올리니깐 구독자분들은 마음 편히 사용하셔도 됩니다.
Next.js 사용 방법
Next.js를 사용하여 웹 애플리케이션을 개발하려면, pages 디렉토리를 생성하고 각각의 페이지를 컴포넌트로 구현합니다. 예를 들어, pages.js 파일은 웹 애플리케이션의 첫 페이지를 나타냅니다.
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>My Next.js App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Welcome to my Next.js app!</h1>
</main>
</div>
)
}위 코드에서는 Head 컴포넌트를 사용하여 페이지의 <title> 요소와 아이콘을 설정하고, <main> 태그 내에 h1 요소를 렌더링합니다.
그리고, package.json 파일의 scripts 항목을 수정하여 개발 서버를 실행할 수 있습니다. (기본적으로 설정되어 있어서 이건 따로 건들이지 않으셔도 됩니다.)
{
"scripts": {
"dev": "next dev"
}
}위 설정을 저장하고, npm run dev 명령어를 실행하면 개발 서버가 시작되고 http://localhost:3000에서 결과물을 확인할 수 있습니다.
'programming > JavaScript' 카테고리의 다른 글
| [html/next.js] array 문법&반복문 map() (0) | 2023.05.10 |
|---|---|
| [html/next.js] next.js 라우팅 (다른 페이지 만드는 방법) (0) | 2023.05.10 |
| [웹개발/html] 2탄_백엔드_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발 (0) | 2023.05.05 |
| [웹개발/html] 1탄_프론트_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발 (1) | 2023.05.05 |
| [JAVA/API활용] kakao maps API 활용해서 지도 만들기!! (0) | 2023.04.21 |