透過 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:>在 Pages 中使用 Apollo 用戶端:
將 Apollo Client 與 getStaticProps、getServerSideProps 一起使用，或在客戶端上使用 Apollo 的 useQuery hook。
使用 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中的redirect或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:>配置下一個-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 是一個函式庫，可簡化將 SEO 元資料新增至 Next.js 應用程式的過程。它提供了一組元件和實用函數來管理 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（伺服器端渲染） 和 CSR（客戶端渲染） 是 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 應用程式與漸進式 Web 應用程式 (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/ 目錄中為應用程式的圖示、主題顏色和其他屬性建立一個 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 外掛程式自動產生服務工作者並處理快取以提供離線支援。
以上是Next.js 面試掌握：基本問題（第 6 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
