Next.js 14 初学者入门指南（上）

在当今快速发展的网站开发领域，Next.js以其独特的优势和便捷的功能，成为了前端开发者的新宠。Next.js是一个开源的JavaScript框架，它建立在流行的JavaScript库React之上，专为构建用户界面而设计。作为一个专门用于构建网络应用程序的框架，Next.js被广泛描述为一个用于服务端渲染或静态生成应用程序的React框架。通过提供一系列工具和约定，Next.js极大地简化了基于React的网络应用程序的开发过程，使得构建快速、高性能且可扩展的网站变得更加容易。

Next.js提供的附加功能能够让你构建生产就绪的应用程序，这些功能包括路由、优化渲染、数据获取、打包、编译等等。最吸引人的一点是，使用Next.js时，你不需要安装额外的包，因为Next.js提供了你所需的一切。要实现这些功能，只需遵循Next.js的观点和约定即可。

为什么学习Next.js对于前端开发者来说是一个明智的选择

简化路由：Next.js的文件系统基础路由让开发者轻松定义页面和链接之间的关系。你无需额外配置，仅通过文件结构就能自动获得强大的路由功能。
API路由：Next.js允许你在同一个项目中创建API路由，这意味着你可以构建前后端紧密集成的应用程序，无需担心跨域请求或配置复杂的后端服务。
双重渲染优势：无论是客户端渲染还是服务端渲染，Next.js都能提供支持，让你根据项目需求和页面特性选择最合适的渲染方式。
数据获取：Next.js提供了静态生成和服务端渲染的数据获取方法，如getStaticProps和getServerSideProps，让数据管理变得简单高效。
样式方便：Next.js支持CSS模块，使得组件级样式变得简单，同时也支持其他流行的CSS-in-JS库，如styled-components，让你能以更灵活的方式定义样式。
优化：Next.js对图片、表单和脚本提供了自动优化，比如图片懒加载和自动压缩，提升了网站的性能和加载速度。
开发和生产构建系统：Next.js提供了针对开发和生产环境优化的构建系统，使得部署和测试变得更加高效。

Next.js的一些核心优势

服务端渲染（SSR）：Next.js支持服务端渲染，这意味着可以在服务器上预渲染页面，然后将完全形成的HTML发送给客户端。这种方式不仅提高了性能，还有助于改善SEO，因为搜索引擎可以抓取到完整的页面内容。
静态站点生成（SSG）：Next.js支持静态站点生成，允许你在构建时预渲染整个页面。这种方式使页面加载时间极快，非常适合内容不经常变化的场景。
API路由：Next.js允许你在应用程序内创建API端点，这样你就可以在同一个代码库中构建前端和后端，简化了开发流程并提高了项目的一致性。
自动代码拆分：Next.js会自动将你的JavaScript代码分割成更小、优化后的包。这样做可以通过减少初始页面加载时需要加载的代码量来提高性能。
图像优化：Next.js内置了对图像优化和高效服务的支持，通过如自动大小调整、懒加载等特性，帮助提升性能和用户体验。
基于文件的路由：Next.js采用基于文件的路由方式，使得路由变得简单直观。在pages目录中创建文件，即可自动为应用生成路由。

通过这些特性，Next.js为开发者提供了一个功能丰富、灵活且高效的平台，用于构建各种规模和复杂度的Web应用。无论是企业级应用、电商网站还是个人博客，Next.js都能够提供强大的支持，使得Web开发更加简单、快捷，并且能够达到高性能的要求。学习和掌握Next.js，无疑会让你在现代Web开发的道路上更加得心应手。

创建一个新的Next.js项目的步骤

打开你的命令行工具（如终端、命令提示符或PowerShell），并执行以下命令，记得将<app-name>替换为你的项目名称：

代码语言：javascript

复制

npx create-next-app@latest <app-name>

这个命令会自动从npm下载并执行create-next-app脚本，创建一个使用最新版本的Next.js的新项目。在这个过程中，脚本可能会询问你是否想要配置TypeScript、ESLint或Tailwind CSS等选项。根据你的项目需求，跟随提示进行选择。

项目创建完成后，通过以下命令切换到项目目录：

代码语言：javascript

复制

cd <app-name>

然后，启动开发服务器：

代码语言：javascript

复制

npm run dev

执行此命令后，Next.js会启动一个本地开发服务器，并且通常会自动打开你的默认网页浏览器显示你的新Next.js应用。如果没有自动打开，你可以手动访问http://localhost:3000来查看你的应用。

Routing

在Next.js中，路由是构建Web应用程序的基础之一，其独特的基于文件系统的路由机制为开发者提供了高效且直观的页面管理方式。通过简单地在代码库中添加文件和文件夹，你可以定义用户可以在浏览器中访问的URL路径。下面是几个关于Next.js路由的学习场景，让我们更深入地了解如何在Next.js应用中实现和管理路由。

场景1：访问根目录

当用户访问根目录（即localhost:3000）时，显示主页。你可以通过在src/app目录下创建page.tsx文件来实现这一点。

代码语言：javascript

复制

// src/app/page.tsx
export default function Home() {

return <h1>Home Page</h1>;

}

这段代码定义了一个简单的React组件，当用户访问应用的根目录时，将展示“Home Page”。

场景2：访问/about页面

当用户访问localhost:3000/about时，显示关于页面。在src/app/about目录下创建page.tsx文件来实现。

代码语言：javascript

复制

// src/app/about/page.tsx
export default function About() {

return <h1>About Page</h1>;

}

场景3：嵌套路由

Next.js允许通过在文件夹内创建文件夹来创建路由层次结构。

代码语言：javascript

复制

// src/app/blog/page.tsx
export default function Blog() {

return <h1>Blog Page</h1>;

}
// src/app/blog/first/page.tsx
export default function FirstBlog() {

return <h1>First Blog Page</h1>;

}

这种方式适用于简单的应用程序结构，但对于复杂的应用程序可能不是最佳选择。

场景4：动态路由

动态路由允许基于URL中提供的参数动态生成页面。这意味着，你无需为每个可能的路由创建单独的静态页面，而是可以使用动态路由来处理URL中的模式或参数。

代码语言：javascript

复制

// src/app/products/[productId]/page.tsx
export default function ProductDetails({ params }: { params: { productId: string }; }) {

return (

<>

<h1>Details about product {params.productId}</h1>

</>

);

}

all segments

在Next.js中，"Catch all"路由是一种强大的路由特性，它允许你匹配包括零个、一个或多个路径段的路由。这种方式非常适用于当你需要构建像文档页面这样的复杂和灵活的路由结构时。通过使用双括号[[...slug]]语法，你可以创建一个能够捕获所有传入请求的动态路由，并且根据URL的不同部分呈现不同的内容。

示例解读

在提供的示例中，我们创建了一个Docs组件，它利用"catch all"路由来展示文档页面。这个组件能够根据URL中slug参数的不同，渲染出不同的文档内容。这里的slug是一个数组，它包含了URL中捕获的所有动态段。

代码语言：javascript

复制

// src/app/docs/[[...slug]]/page.tsx
export default function Docs({params}: {

params: {

slug: string[];

};

}) {

// 检查slug参数的长度，以决定渲染哪种内容

if (params.slug?.length === 2) {

return <h1>Viewing docs for feature {params.slug[0]} and concept {params.slug[1]}</h1>;

} else if (params.slug?.length === 1) {

return <h1>Viewing docs for feature {params.slug[0]}</h1>;

}

// 如果没有提供slug参数，渲染默认的文档页面

return <h1>Docs Page</h1>;

}

当slug参数长度为2时，假设URL为/docs/feature1/concept1，则页面将渲染：“Viewing docs for feature feature1 and concept concept1”。
当slug参数长度为1时，如果URL为/docs/feature1，页面将渲染：“Viewing docs for feature feature1”。
如果没有提供slug参数，即访问/docs，页面将渲染默认的文档页面：“Docs Page”。

优势

使用"catch all"路由的优势在于，它为构建具有灵活路由需求的应用程序（如文档网站、博客平台等）提供了简单而强大的解决方案。开发者可以轻松地管理和展示变化多端的内容，而无需为每个可能的URL变体单独设置路由规则。这不仅提高了开发效率，也使得应用架构更加清晰和易于维护。

创建404页面

在Next.js中处理404错误页面是一个简单而直接的过程，通过定义一个特定的组件，你可以为用户提供一个更友好的错误提示页面，而不是默认的浏览器错误页面。这对于改善用户体验和维持网站的专业形象非常重要。

通过在src/app目录下创建一个not-found.tsx文件，你可以定义一个NotFound组件，当用户尝试访问一个不存在的页面时，将显示该组件。

代码语言：javascript

复制

// src/app/not-found.tsx
export default function NotFound() {

return (

<>

<h2>Page not found</h2>

<p>Could not find requested resource</p>

</>

);

}

在Next.js中，当用户尝试访问一个不存在的路由时，Next.js会自动查找并渲染pages/404.js或src/pages/404.js文件（取决于你的项目结构）。如果你在这些位置定义了自定义404页面，Next.js将渲染你定义的页面而不是默认的404页面。

私有文件夹

在Next.js中使用私有文件夹是管理项目文件结构的一个高效方式，尤其适合于那些想要将UI逻辑与路由逻辑分离、维护项目内部文件组织一致性、在代码编辑器中排序和分组文件、以及避免未来Next.js文件命名规范可能带来的命名冲突的开发者。通过简单地在文件夹名称前加上下划线_，你可以轻松地创建私有文件夹，这些文件夹及其所有子文件夹都会被Next.js的路由系统自动忽略。

假设你有一些库文件或者一些只供内部使用的组件，你不希望这些文件或组件被当作页面对外提供服务。你可以将这些文件放在一个前缀为下划线的文件夹中，比如_lib。

代码语言：javascript

复制

// src/app/_lib/page.tsx
export default function PrivateRoute() {

return <h1>You can't view this in the browser</h1>;

}

在上面的例子中，尽管我们创建了page.tsx文件，由于它位于_lib文件夹下，访问localhost:3000/_lib将会显示404错误，因为Next.js自动将_lib及其子文件夹从路由系统中排除了。

路由分组

在Next.js中组织和管理路由时，有时候我们需要逻辑上对路由进行分组，而又不希望这种分组影响到URL路径结构。这种需求在实际开发中非常常见，例如，你可能想要将所有与身份验证相关的页面（如登录、注册、忘记密码等）放在同一个文件夹下以提高开发体验，但又不想在URL中体现这种文件结构。

使用路由分组解决问题

Next.js提供了一种简便的方法来实现这一点：路由分组。通过在文件夹名周围添加括号，你可以告诉Next.js这个文件夹是用于逻辑分组的，并且不应该影响到URL的结构。

例如，如果不使用路由分组，你可能会将登录页面放在/pages/auth/login.tsx，这将导致页面的URL为localhost:3000/auth/login。但是，如果你想要保持login页面的URL为localhost:3000/login，同时又想在项目文件中将这个页面放在auth分组下，你可以通过路由分组来实现。

实现路由分组

要实现路由分组，只需要将相关的文件夹用括号括起来。以下是具体操作步骤：

创建分组文件夹：将auth文件夹更名为(auth)。
移动页面到分组文件夹：将login.tsx、register.tsx和forgot-password.tsx等页面移动到(auth)文件夹中。

通过这种方式，login页面的物理路径可能是/pages/(auth)/login.tsx，但是在浏览器中访问这个页面的URL将会是localhost:3000/login，而不是localhost:3000/auth/login。

路由分组的好处

改善项目结构：路由分组允许开发者根据逻辑功能对文件和路由进行分组，而不必担心这种组织结构会对URL路径造成影响，从而使项目文件结构更清晰、更有组织。
提升开发体验：对于开发者来说，能够在不改变URL结构的情况下逻辑性地组织路由和页面，可以大大提升开发体验。
增加灵活性：这种分组方式提供了额外的灵活性，让开发者可以根据需要更自由地组织项目文件，而不受URL路径限制。

通过利用Next.js的路由分组功能，你可以在确保URL路径简洁的同时，对项目中的文件和路由进行有效的逻辑分组，这对于大型项目的开发和维护来说尤为重要。

Layouts

在构建Web应用时，常常需要某些UI元素（如头部导航和底部信息）在多个页面间共享。这种需求通过使用布局（Layouts）来实现最为高效。布局允许开发者定义一个组件作为页面的共享结构，然后将特定的页面内容注入到这个结构中。Next.js通过支持布局，使得管理和重用页面结构变得简单。

根布局（Root Layout）

根布局是应用于所有路由的布局。你可以创建一个layout.js或layout.tsx文件来定义根布局，然后在其中包括所有页面共享的元素，如头部和底部。根布局组件应该接受一个children属性，这个属性在渲染时会被填充为子页面。

代码语言：javascript

复制

// 示例：定义根布局

export default function RootLayout({

children,

}: {

children: React.ReactNode

}) {

return (

<html lang="en">

<body>

<header>

<p>Header</p>

</header>
    {children}
 
    &lt;footer&gt;
      &lt;p&gt;Footer&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;

);

}

嵌套布局（Nested Layout）

嵌套布局用于特定的路由段，只有当这些路由段处于活动状态时，定义在内部的布局才会被渲染。通过在特定文件夹下定义layout.js（例如app/dashboard/layout.js），你可以为那个路由段及其子路由提供专用的布局。

代码语言：javascript

复制

// 示例：定义特定路由段的嵌套布局

export default function DashboardLayout({

children,

}: {

children: React.ReactNode

}) {

return (

<div>

<nav>

<p>Dashboard Navigation</p>

</nav>
    {children}
&lt;/div&gt;

);

}

这种方式允许你为应用中的不同部分定义不同的布局结构，如仪表板、博客部分等，每个部分都可以有自己的头部导航、侧边栏或其他共享元素。

使用布局的好处

一致性：通过使用布局，你可以确保应用中的不同页面共享相同的结构，这有助于保持界面的一致性。
重用性：布局允许你在多个页面间重用相同的UI结构，减少重复的代码。
可维护性：将共享元素放在布局中可以简化页面组件，使其更专注于页面特定内容的渲染，从而提高代码的可维护性。

使用根布局和嵌套布局，你可以灵活地定义应用的页面结构，同时保持代码的清晰和组织性。这是构建大型应用时管理页面布局的一种高效方法。

结束

在今天的文章中，我们一起探索了Next.js这个强大的JavaScript框架，从基本概念到路由、布局以及私有文件夹的高级特性，每一点都旨在帮助你更好地理解如何利用Next.js构建高性能、易于维护的现代Web应用。无论你是刚开始接触Web开发的新手，还是希望提升项目质量的资深开发者，Next.js都提供了丰富的功能和灵活性，以满足不同的开发需求。

我们的探索之旅还远没有结束。在下篇文章中，我将继续深入分享Next.js的更多精彩内容，每一篇文章都旨在为你揭开Next.js高效开发的更多秘密，助你在Web开发的道路上更加得心应手。

别忘了关注「前端达人」，这里不仅有深入浅出的技术文章，还有最新的前端趋势解读，帮助你保持技术的前瞻性和竞争力。你的关注、点赞和转发是对我最大的支持，也是我持续分享高质量内容的动力。