Next.js インタビュー ガイド: 成功するための 100 の質問と回答 ? を使用して、Next.js をマスターする際の可能性を最大限に引き出します。開発者として始めたばかりの場合でも、スキルを次のレベルに引き上げたいと考えている経験豊富なプロフェッショナルでも、この包括的な電子書籍は、Next.js の面接に合格し、自信を持って就職できる人材になるのに役立つように設計されています。開発者。このガイドでは Next.js の幅広いトピックをカバーしており、起こり得るあらゆる質問に十分に備えることができます。この電子書籍では、サーバーサイド レンダリング (SSR)、静的サイト生成 (SSG) などの重要な概念について説明します。 ) ?、増分静的再生成 (ISR) ⏳、App Router ?️、データ フェッチ ? など。各トピックは徹底的に説明されており、実際の例と、面接で最もよく聞かれる質問に対する詳細な回答が提供されています。このガイドでは、質問に答えるだけでなく、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:>Pages で Apollo クライアントを使用する:
getStaticProps、getServerSideProps を使用して Apollo クライアントを使用するか、Apollo の useQuery フックを使用してクライアント上で Apollo クライアントを使用します。
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 フックまたは Link コンポーネントを使用して、プログラムで 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:>リンクコンポーネントの使用 (宣言型ナビゲーションの場合):
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 メタデータの追加を簡素化するライブラリです。タイトル、説明、Open Graph タグなどの 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 アナリティクスを Next.js プロジェクトに追加するには、next/script コンポーネントを使用して Google アナリティクス スクリプトを
に挿入します。あなたのページの手順:
例:
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 (サーバーサイド レンダリング) と CSR (クライアント サイド レンダリング) は、Next.js の 2 つの異なるレンダリング メソッドです。
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 アプリをプログレッシブ Web アプリ (PWA) 互換にするには、Service Worker、マニフェスト ファイルを使用し、アプリをインストール可能に構成する必要があります。
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/ ディレクトリに manifest.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:>Service Worker の追加:
next-pwa プラグインは、Service Worker を自動的に生成し、オフライン サポートのためのキャッシュを処理します。
以上がNext.js 面接の習得: 重要な質問 (パート 6)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
