通过 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中文网其他相关文章！
