Next.js는 개발자가 빠른 서버 렌더링 애플리케이션을 만들 수 있게 해주는 인기 있는 React 프레임워크입니다. SSG(정적 사이트 생성), SSR(서버 측 렌더링) 및 API 경로와 같은 강력한 기능을 즉시 제공합니다. 이 가이드에서는 주요 개념과 실제 사례에 중점을 두고 첫 번째 Next.js 애플리케이션을 구축하는 과정을 안내합니다.
Next.js를 시작하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다. Node.js를 설정한 후에는 다음 명령을 사용하여 새로운 Next.js 애플리케이션을 생성할 수 있습니다.
npx create-next-app my-next-app
이 명령은 Next.js 애플리케이션을 시작하는 데 필요한 모든 파일과 종속성을 포함하는 my-next-app이라는 새 디렉터리를 생성합니다.
프로젝트를 생성한 후 프로젝트 디렉터리로 이동하세요.
cd my-next-app
my-next-app 디렉토리 내에서 다음과 유사한 구조를 찾을 수 있습니다.
my-next-app/ ├── node_modules/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js ├── public/ ├── styles/ │ ├── Home.module.css ├── package.json └── README.md
페이지 디렉토리는 애플리케이션 페이지를 생성하는 곳이고 공개 디렉토리는 정적 자산을 위한 디렉토리입니다.
Next.js는 파일 기반 라우팅 시스템을 사용합니다. 새 페이지를 만들려면 페이지 디렉터리에 새 JavaScript 파일을 추가하기만 하면 됩니다. 예를 들어 about.js라는 파일을 만듭니다.
// pages/about.js
import Link from 'next/link';
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page of my first Next.js application!</p>
<Link href="/">Go back home</Link>
</div>
);
}
이 예에서는 간단한 정보 페이지를 만들고 링크 구성 요소를 사용하여 홈 페이지로 다시 이동했습니다.
페이지 디렉토리에서 index.js 파일을 엽니다. 이 파일은 애플리케이션의 홈 페이지를 나타냅니다. 다음과 같이 수정할 수 있습니다:
// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<p>
This is my first application built with Next.js.{' '}
<Link href="/about">Learn more about me</Link>
</p>
</div>
);
}
여기에 간단한 스타일과 정보 페이지 링크를 추가했습니다.
Next.js는 기본적으로 CSS 모듈을 지원합니다. 구성 요소의 스타일을 지정하려면 스타일 디렉터리에 CSS 모듈을 생성하면 됩니다. 예를 들어 Home.module.css라는 파일을 만듭니다.
/* styles/Home.module.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
다음으로, 이전 섹션에 표시된 대로 이 CSS 모듈을 index.js 페이지로 가져옵니다.
Next.js를 사용하면 정적 사이트 생성을 위한 getStaticProps 또는 서버 측 렌더링을 위한 getServerSideProps를 사용하여 데이터를 쉽게 가져올 수 있습니다. 예를 들어 홈 페이지에서 데이터를 가져오려면 다음과 같이 index.js를 수정할 수 있습니다.
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: { posts },
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
이 코드에서는 공개 API에서 게시물 목록을 가져와 홈 페이지에 표시합니다.
Next.js를 사용하면 페이지/api 디렉터리에 API 경로를 생성할 수 있습니다. 이러한 경로는 백엔드 기능을 구축하는 데 사용될 수 있습니다. 예를 들어, Pages/api 디렉터리에 hello.js라는 파일을 만듭니다.
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Next.js API!' });
}
http://localhost:3000/api/hello로 이동하여 이 API 경로에 액세스할 수 있습니다.
애플리케이션이 준비되면 쉽게 배포할 수 있습니다. Vercel은 Next.js 애플리케이션에 권장되는 호스팅 플랫폼입니다. 다음 단계에 따라 앱을 배포할 수 있습니다.
Vercel 계정이 없다면 계정을 만드세요.
Vercel CLI를 전역적으로 설치:
npx create-next-app my-next-app
프로젝트 디렉터리에서 다음 명령을 실행하세요.
cd my-next-app
메시지에 따라 애플리케이션을 배포하세요.
Next.js는 대괄호를 사용한 동적 라우팅을 지원합니다. 예를 들어, 동적 블로그 게시물 페이지를 생성하려는 경우 페이지/포스트 디렉터리에 [id].js라는 파일을 생성할 수 있습니다.
my-next-app/ ├── node_modules/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js ├── public/ ├── styles/ │ ├── Home.module.css ├── package.json └── README.md
이제 /posts/1, /posts/2 등으로 이동하여 특정 게시물에 액세스할 수 있습니다.
애플리케이션에 전역 스타일을 적용하려면 페이지 디렉토리에 _app.js라는 파일을 생성하면 됩니다.
// pages/about.js
import Link from 'next/link';
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page of my first Next.js application!</p>
<Link href="/">Go back home</Link>
</div>
);
}
다음으로 스타일 디렉터리에 globals.css 파일을 만들고 전역 스타일을 추가합니다.
// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<p>
This is my first application built with Next.js.{' '}
<Link href="/about">Learn more about me</Link>
</p>
</div>
);
}
Next.js는 민감한 정보를 저장할 수 있는 환경 변수를 지원합니다. 프로젝트 루트에 .env.local 파일을 생성하고 변수를 추가할 수 있습니다.
/* styles/Home.module.css */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
그런 다음 process.env를 사용하여 애플리케이션에서 이 변수에 액세스할 수 있습니다.
// pages/index.js
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: { posts },
};
}
export default function Home({ posts }) {
return (
<div className={styles.container}>
<h1>Welcome to My Next.js App</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
첫 번째 Next.js 애플리케이션 구축을 축하합니다! 이 여정을 통해 프로젝트를 설정하고, 동적 페이지를 생성하고, 데이터를 원활하게 가져오고, 강력한 라우팅을 구현하고, 애플리케이션을 쉽게 배포하는 방법을 배웠습니다.
Next.js는 단순한 프레임워크 그 이상입니다. 이는 웹 개발 경험을 크게 향상시킬 수 있는 강력한 도구입니다. SSG(정적 사이트 생성) 및 SSR(서버측 렌더링)과 같은 내장 기능을 사용하면 성능과 SEO에 최적화된 빠르고 사용자 친화적인 애플리케이션을 만들 수 있습니다.
첫 번째 Next.js 애플리케이션을 성공적으로 구축했으므로 이제 기술을 한 단계 더 발전시킬 차례입니다. 다가오는 이번 게시물 시리즈에서는 애플리케이션을 향상시키고 개발 프로세스를 간소화할 수 있는 Next.js의 고급 기능 중 일부에 대해 더 자세히 알아볼 것입니다.
미들웨어는 요청이 완료되기 전에 사용자 정의 로직을 추가하여 애플리케이션의 기능을 확장할 수 있는 강력한 기능입니다. 즉, 요청 및 응답 개체를 조작하고, 사용자를 인증하고, 리디렉션을 원활하게 관리할 수도 있습니다.
다음으로 정적 사이트 생성(SSG)을 살펴보겠습니다. 이 기술은 빌드 시 페이지를 사전 렌더링하여 빠른 로딩 속도와 향상된 SEO 성능을 제공합니다. SSG를 활용하는 방법을 이해하면 동적일 뿐만 아니라 놀라울 정도로 효율적인 애플리케이션을 만들 수 있습니다.
마지막으로 Next.js 애플리케이션 내에서 직접 서버리스 기능을 구축할 수 있는 기능인 API 경로를 다루겠습니다. 즉, 별도의 서버 없이 요청과 응답을 처리할 수 있어 더 적은 오버헤드로 풀스택 애플리케이션을 보다 쉽게 개발할 수 있습니다.
Next.js의 고급 기능을 향한 흥미진진한 여정을 시작하려면 저를 따라오세요. 이러한 도구를 마음대로 사용하면 정말 눈에 띄는 강력한 고성능 애플리케이션을 구축할 수 있습니다. 다음 게시물을 기대해주세요!
이 게시물은 다음에서도 읽을 수 있습니다.
Next.js는 개발자가 빠른 서버 렌더링 애플리케이션을 만들 수 있게 해주는 인기 있는 React 프레임워크입니다. 기본적으로 강력한 기능을 제공합니다!
salmaniyad.hashnode.dev
찾기:
SalmanIyad · GitHub
컴퓨터 시스템 엔지니어 | 웹 개발자. SalmanIyad에는 31개의 저장소가 있습니다. GitHub에서 코드를 따르세요.
github.com
위 내용은 Next.js 소개: 첫 번째 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
