本文主要是介绍Nextjs实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、安装
Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行：
npx create-next-app@latest如果你是 Next.js 的新手，请查看 Next.js 教程。
Next.js 由 Vercel 维护。你可以 将 Next.js 应用 部署到 Node.js 或 serverless 上，也可以部署到你自己的服务器上。完全静态的 Next.js 应用 可以部署在任何支持静态服务的地方。
1. 安装步骤
Node版本要求在18.17以上，建议使用nvm切换
打开终端(官网建议使用create-next-app创建Next应用)
npx create-next-app@latest接下来将看到如下提示：根据自己的习惯进行选择，这里我全选Yes，最后回车
What is your project named? my-next-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/)? No / Yes
What import alias would you like configured? @/
注意：选择使用项目根目录中的src目录将应用程序代码与配置文件分开。这和我选择的方式是一致的
2. 项目结构
二、集成第三方登录
Dashboard | Clerk.com 官网
1，添加应用程序
2、选择登录方式
Add authentication and user management to your Next.js app with Clerk in 7 minutes | Clerk
3、如何将Clerk身份添加到nextjs中
https://clerk.com/docs/quickstarts/nextjs 文档
（1）、安装
npm install @clerk/nextjs（2）、设置环境键（这里看你的文档他是有自动生成的键）
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2FjcmVkLWd1cHB5LTE4LmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_••••••••••••••••••••••••••••••••••在根目录创建.env.local文件把上面copy到文件中
（3）、路由选择
我们这里选择app router这个是比较常用的
修改/src/app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<ClerkProvider><html lang="en"><body>{children}</body></html></ClerkProvider>)
}（4）、在src/下创建中间件
在src/创建middleware.ts
import { authMiddleware } from "@clerk/nextjs";// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({});export const config = {matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
（5）、嵌入<UserButton />
在app/page.tsx文件加入<UserButton />
import { UserButton } from "@clerk/nextjs";export default function Home() {return (<div><UserButton afterSignOutUrl="/"/></div>)
}启动项目（到这里就完成了！）
npm run dev
登录成功这个显示的就是你刚刚的加的那个<UserButton />来控制你登陆的状态
三、路由介绍
待更新！！
这篇关于Nextjs实战的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![[最全]设计模式实战（一）UML六大原则](https://img-blog.csdnimg.cn/direct/9f796f6f52fa4d27a3e6f1d8636944da.png)
