Next.js 面接の習得: 重要な質問 (パート 7)-jsチュートリアル-php.cn

Next.js 面接の習得: 重要な質問 (パート 7)

Barbara Streisand

リリース： 2024-11-19 17:14:03

オリジナル

161 人が閲覧しました

Next.js Interview Mastery: Essential Questions (Part 7)

Next.js 面接ガイド: 成功するための 100 の質問と回答 (無料)

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 開発者として優れた知識を身につけてください。そして自信を持って次のキャリアのチャンスに踏み出しましょう！

サイズを指定: レイアウトのずれを避けるために、画像の幅と高さの属性を常に指定します。

画像の遅延読み込み: デフォルトでは、画像は遅延読み込みされます。つまり、画像はビューポートに表示されている場合にのみ読み込まれます。これによりパフォーマンスが向上します。

外部イメージプロバイダーを使用する: 外部イメージ CDN (Cloudinary や Imgix など) を使用している場合は、next.config.js:
でそれをサポートするように Next.js を構成します。

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

ログイン後にコピー

レスポンシブ画像: サイズを使用して、ビューポートごとに異なる画像サイズを定義します。

69. Next.js で JWT を使用したユーザー認証をどのように処理できますか?

Next.js で JWT (JSON Web Token) を使用したユーザー認証を処理するには、通常、次の手順に従います。

JWT を保存: ログイン後、JWT を Cookie または localStorage に保存します。
- Cookie はリクエストごとに自動的に送信されるため、トークンを保存するための推奨される方法です。
HTTP ヘッダーに JWT を設定します: API リクエストの場合、Authorization ヘッダーで JWT を送信します。
```
const response = await fetch('/api/protected', {
  headers: {
    'Authorization': `Bearer ${token}`,
  },
});
```
ログイン後にコピー

サーバー上の JWT を確認します: API ルートまたはミドルウェアで、保護されたリソースにアクセスする前に JWT を確認します。

import jwt from 'jsonwebtoken';

export async function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Unauthorized' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // Attach the decoded user to the request
    next();
  } catch (err) {
    return res.status(401).json({ message: 'Invalid token' });
  }
}

ログイン後にコピー

永続的なログインに Cookie を使用する: JWT で HTTP のみの Cookie を設定できるため、セッション間でユーザーの認証が維持されます。

70. Next.js で承認をどのように処理できますか?

Next.js での承認には、通常、認証が成功した後のユーザーのロールまたは権限レベルのチェックが含まれます。以下にいくつかのアプローチを示します:

ロールベースの承認: ユーザーがログインしたら、そのロールを JWT に保存し、ユーザーが保護されたルートにアクセスしようとしたときにチェックします。

export async function handler(req, res) {
  const token = req.cookies.token;
  if (!token) return res.status(403).json({ message: 'Forbidden' });

  const decoded = jwt.verify(token, process.env.JWT_SECRET);
  if (decoded.role !== 'admin') {
    return res.status(403).json({ message: 'Forbidden' });
  }
  // Proceed with handling the request
}

ログイン後にコピー

カスタム認可ミドルウェア: カスタムミドルウェアを作成して、特定のページまたは API ルートを提供する前にユーザーが必要な権限を持っているかどうかを確認できます。
未承認ユーザーをリダイレクト: SSR または SSG ページの場合、getServerSideProps を使用してユーザーが承認されているかどうかを確認し、承認されていない場合はリダイレクトできます。
```
export async function getServerSideProps(context) {
  const token = context.req.cookies.token;
  if (!token) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: {} };
}
```
ログイン後にコピー

以上がNext.js 面接の習得: 重要な質問 (パート 7)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。