Next.js 인터뷰 가이드: 성공을 위한 100가지 질문과 답변으로 Next.js 마스터의 잠재력을 최대한 발휘해 보세요. 이제 막 개발자로 시작하는 사람이든, 자신의 기술을 다음 단계로 끌어올리려는 숙련된 전문가이든 관계없이 이 포괄적인 전자책은 Next.js 인터뷰에 합격하고 자신감을 갖고 취업 준비를 하는 데 도움이 되도록 설계되었습니다. 개발자. 이 가이드는 다양한 Next.js 주제를 다루므로 귀하가 발생할 수 있는 모든 질문에 잘 대비할 수 있습니다. 이 전자책에서는 SSR(서버 측 렌더링), SSG(정적 사이트 생성)와 같은 주요 개념을 살펴봅니다. ) ?, 증분 정적 재생성(ISR) ⏳, 앱 라우터 ?️, 데이터 가져오기 ? 등이 있습니다. 각 주제를 철저하게 설명하고 실제 사례와 가장 자주 묻는 인터뷰 질문에 대한 자세한 답변을 제공합니다. 질문에 답하는 것 외에도 가이드에서는 Next.js 애플리케이션 최적화, 성능 개선⚡ 및 확장성 보장을 위한 모범 사례✅를 강조합니다. Next.js가 지속적으로 발전함에 따라 React 18, 동시 렌더링 및 Suspense ?와 같은 최첨단 기능에 대해서도 자세히 알아봅니다. 이를 통해 귀하는 항상 최신 발전 사항을 확인하고 면접관이 찾고 있는 지식을 얻을 수 있습니다. 이 가이드를 차별화하는 것은 실용적인 접근 방식입니다. 이론만 다루는 것이 아니라 프로젝트에 직접 적용할 수 있는 실행 가능한 통찰력을 제공합니다. 보안?, SEO 최적화? 및 배포 방법?️도 자세히 살펴보므로 전체 개발 수명 주기에 대비할 수 있습니다. 최고의 기술 회사에서 기술 인터뷰를 준비하든, 보다 효율적인 구축을 모색하든, 확장 가능한 애플리케이션을 활용하는 이 가이드는 Next.js 기술을 연마하고 경쟁에서 두각을 나타내는 데 도움이 될 것입니다. 이 책이 끝나면 기본 개념부터 전문가 수준의 과제에 이르기까지 모든 Next.js 인터뷰 질문에 자신있게 답할 준비가 될 것입니다. Next.js 개발자로서 뛰어난 지식을 갖추십시오. 자신있게 다음 직업 기회를 잡으세요!
GraphQL은 Next.js에서 헤드리스 CMS 또는 GraphQL 엔드포인트의 콘텐츠를 쿼리하는 데 사용할 수 있습니다. Next.js를 사용하면 정적 생성(getStaticProps 사용), 서버 측 렌더링(getServerSideProps 사용) 또는 클라이언트 측(Apollo Client 또는 URQL과 같은 후크 사용) 중에 GraphQL에서 데이터를 가져올 수 있습니다.
graphql-request의 예:
import { request } from 'graphql-request';
export async function getStaticProps() {
const query = `{
posts {
id
title
content
}
}`;
const data = await request('<https:>', query);
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
</https:>Apollo Client는 GraphQL 작업에 널리 사용되는 라이브러리입니다. Next.js 애플리케이션에 쉽게 통합되어 서버측과 클라이언트측 모두에서 데이터를 가져올 수 있습니다.
Apollo 클라이언트 통합 단계:
종속성 설치:
npm install @apollo/client graphql
Apollo 클라이언트 설정:
apolloClient.js 파일을 생성하여 Apollo 클라이언트를 구성합니다:
// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({ uri: '<https:>' }),
cache: new InMemoryCache(),
});
export default client;
</https:>페이지에서 Apollo 클라이언트 사용:
getStaticProps, getServerSideProps와 함께 Apollo 클라이언트를 사용하거나 Apollo의 useQuery 후크를 사용하는 클라이언트에서 사용하세요.
getStaticProps 사용 예:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
}
}
`;
export async function getStaticProps() {
const { data } = await client.query({ query: GET_POSTS });
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
</div>
))}
</div>
);
}
Next.js에서는 페이지 수준 리디렉션을 위해 getServerSideProps 또는 generateStaticParams의 리디렉션을 사용하여 서버측 리디렉션을 수행할 수 있습니다.
예:
export async function getServerSideProps(context) {
// Check some condition, like user authentication
const isAuthenticated = false;
if (!isAuthenticated) {
return {
redirect: {
destination: '/login',
permanent: false, // Optional: set to true for permanent redirects
},
};
}
return {
props: {}, // Will pass to the component
};
}
예:
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/old-page',
destination: '/new-page',
permanent: true,
},
];
},
};
이 구성은 배포 시 /old-page를 /new-page로 영구적으로 리디렉션합니다.
이러한 방법을 사용하면 서버 측 조건과 Next.js의 정적 구성을 기반으로 리디렉션을 처리할 수 있습니다.
Next.js의 useRouter 후크는 기능 구성 요소의 라우터 개체에 액세스하는 데 사용됩니다. 현재 경로, 쿼리 매개변수, 경로 이름 및 탐색 방법에 대한 액세스를 제공합니다. 일반적으로 현재 경로에 대한 정보를 얻거나 프로그래밍 방식으로 다른 경로로 이동하는 데 사용됩니다.
사용 예:
'use client'; // Required for client-side hooks
import { useRouter } from 'next/router';
export default function MyComponent() {
const router = useRouter();
const handleClick = () => {
// Navigate programmatically to another route
router.push('/about');
};
return (
<div>
<p>Current Path: {router.pathname}</p>
<button onclick="{handleClick}">Go to About Page</button>
</div>
);
}
공통 속성 및 방법:
useRouter 후크 또는 링크 구성 요소를 사용하여 Next.js에서 프로그래밍 방식으로 탐색할 수 있습니다.
useRouter 후크 사용:
router.push() 메소드를 사용하면 프로그래밍 방식으로 새 페이지로 이동할 수 있습니다.
예:
import { request } from 'graphql-request';
export async function getStaticProps() {
const query = `{
posts {
id
title
content
}
}`;
const data = await request('<https:>', query);
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
</https:>Link 구성 요소 사용(선언적 탐색용):
npm install @apollo/client graphql
router.replace() 사용:
브라우저 기록 스택에 새 페이지를 추가하지 않고 탐색하려면 router.replace()를 사용하세요.
next-i18next는 Next.js에 대한 국제화(i18n) 지원을 제공하는 인기 라이브러리입니다. 여러 언어에 대한 번역을 관리하는 데 도움이 되고 현지화 설정 프로세스가 단순화됩니다.
next-i18next 사용 단계:
패키지 설치:
// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({ uri: '<https:>' }),
cache: new InMemoryCache(),
});
export default client;
</https:>next-i18next 구성:
next.config.js에서 지원되는 로캘과 기본 언어를 구성합니다.
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
}
}
`;
export async function getStaticProps() {
const { data } = await client.query({ query: GET_POSTS });
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
</div>
))}
</div>
);
}
번역 파일 만들기:
프로젝트에서 public/locales라는 폴더를 생성하고 각 언어에 대한 JSON 파일을 추가하세요.
export async function getServerSideProps(context) {
// Check some condition, like user authentication
const isAuthenticated = false;
if (!isAuthenticated) {
return {
redirect: {
destination: '/login',
permanent: false, // Optional: set to true for permanent redirects
},
};
}
return {
props: {}, // Will pass to the component
};
}
구성요소에서 번역 사용:
번역을 얻으려면 next-i18next에서 제공하는 useTranslation 후크를 사용하세요.
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/old-page',
destination: '/new-page',
permanent: true,
},
];
},
};
Next.js의 현지화는 앱 콘텐츠 번역을 처리하는 next-i18next를 사용하여 구현할 수 있습니다. 간략한 안내는 다음과 같습니다.
언어별 파일 만들기:
각 언어에는 public/locales 디렉토리에 자체 번역 파일이 있습니다. 예를 들어 영어와 스페인어의 경우:
'use client'; // Required for client-side hooks
import { useRouter } from 'next/router';
export default function MyComponent() {
const router = useRouter();
const handleClick = () => {
// Navigate programmatically to another route
router.push('/about');
};
return (
<div>
<p>Current Path: {router.pathname}</p>
<button onclick="{handleClick}">Go to About Page</button>
</div>
);
}
useTranslation을 사용하여 번역에 액세스:
useTranslation 후크를 사용하여 모든 구성 요소의 번역에 액세스하세요.
import { useRouter } from 'next/router';
function NavigateButton() {
const router = useRouter();
const handleNavigation = () => {
router.push('/new-page'); // Navigates to a new page
};
return <button onclick="{handleNavigation}">Go to New Page</button>;
}
언어 전환 설정:
사용자가 언어를 전환할 수 있도록 언어 전환기를 제공할 수 있습니다.
import { request } from 'graphql-request';
export async function getStaticProps() {
const query = `{
posts {
id
title
content
}
}`;
const data = await request('<https:>', query);
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
</https:>next-seo는 Next.js 애플리케이션에 SEO 메타데이터를 추가하는 작업을 단순화하는 라이브러리입니다. 제목, 설명, 오픈 그래프 태그와 같은 SEO 메타데이터를 관리하기 위한 일련의 구성요소와 유틸리티 기능을 제공합니다.
next-seo 사용 단계:
패키지 설치:
npm install @apollo/client graphql
페이지에 SEO 메타데이터 추가:
NextSeo 구성 요소를 사용하여 각 페이지에 SEO 메타 태그를 추가할 수 있습니다.
// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({ uri: '<https:>' }),
cache: new InMemoryCache(),
});
export default client;
</https:>글로벌 SEO 설정:
Pages/_document.js에서 전역 SEO 설정을 구성하여 모든 페이지에 기본 SEO 설정을 적용할 수 있습니다.
Google Analytics를 Next.js 프로젝트에 추가하려면 next/script 구성요소를 사용하여 Google Analytics 스크립트를
귀하의 페이지 중단계:
예:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
}
}
`;
export async function getStaticProps() {
const { data } = await client.query({ query: GET_POSTS });
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
</div>
))}
</div>
);
}
참고:
SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)은 Next.js의 두 가지 렌더링 방법입니다.
SSR(서버측 렌더링):
SSR에서는 요청 중에 페이지가 서버에 미리 렌더링됩니다. 이는 HTML이 서버에서 생성되고 완전히 렌더링된 페이지가 클라이언트로 전송된다는 의미입니다. SSR은 동적 콘텐츠를 표시해야 하고 검색 엔진에서 색인을 생성해야 하거나 빠른 초기 페이지 로드가 필요한 페이지에 유용합니다.
export async function getServerSideProps(context) {
// Check some condition, like user authentication
const isAuthenticated = false;
if (!isAuthenticated) {
return {
redirect: {
destination: '/login',
permanent: false, // Optional: set to true for permanent redirects
},
};
}
return {
props: {}, // Will pass to the component
};
}
CSR(클라이언트측 렌더링):
CSR에서 페이지는 전적으로 클라이언트 측에서 렌더링됩니다. 서버에서 제공되는 초기 HTML은 최소한이며(일반적으로 뼈대 또는 로딩 페이지) JavaScript가 콘텐츠 렌더링을 담당합니다. CSR은 사용자 상호 작용에 따라 콘텐츠가 자주 변경되는 애플리케이션에 유용합니다.
Next.js 앱을 프로그레시브 웹 앱(PWA)과 호환되게 만들려면 서비스 워커와 매니페스트 파일을 사용하고 앱이 설치 가능하도록 구성해야 합니다.
PWA 플러그인 설치:
next-pwa 플러그인을 사용하면 Next.js에서 PWA를 쉽게 설정할 수 있습니다.
import { request } from 'graphql-request';
export async function getStaticProps() {
const query = `{
posts {
id
title
content
}
}`;
const data = await request('<https:>', query);
return {
props: {
posts: data.posts,
},
};
}
export default function PostsPage({ posts }) {
return (
<div>
{posts.map(post => (
<div key="{post.id}">
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
</https:>next.config.js에서 next-pwa 구성:
npm install @apollo/client graphql
매니페스트 파일 추가:
앱 아이콘, 테마 색상 및 기타 속성에 대한 public/ 디렉터리에 매니페스트.json을 만듭니다.
// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({ uri: '<https:>' }),
cache: new InMemoryCache(),
});
export default client;
</https:>서비스 워커 추가:
next-pwa 플러그인은 서비스 워커를 자동으로 생성하고 오프라인 지원을 위한 캐싱을 처리합니다.
위 내용은 Next.js 인터뷰 숙달: 필수 질문(6부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
