Next.js 实战开发入门教程敏捷开发框架

影子伴我久孤独念我深 發表於 2024-11-7 21:59:00

Next.js 实战开发入门教程敏捷开发框架

在上一篇文章中，我们已经成功实现了网站的导航栏。接下来，我们将继续开发网页的主体部分，用于展示我们的网站业务情况。
<h2>主页内容展示</h2>
首先，我们需要创建一个名为 <code>/app/components/Main.tsx</code> 的文件，作为主页内容的入口。然后在根目录的 <code>/app/page.tsx</code> 中引入这个组件，这样在访问主页时就能看到我们编辑的内容。
<h3>页面结构</h3>
主页的内容分为以下几个部分：
<ol>
<li>
主题展示
</li>
<li>
查询可用子域名
</li>
<li>
用户的DNS管理面板
</li>
<li>
产品介绍模块
</li>
<li>
客户介绍模块
</li>
<li>
订阅模块
</li>
</ol>
为了实现上述需求，我们首先需要在 <code>/app/components/Main.tsx</code> 中创建一个弹性的容器，并设置主轴方向为垂直方向。这样可以使子元素在交叉轴（水平方向）上居中对齐，并且占满父容器的宽度。这样的布局方式可以确保每个子模块垂直排列，并且宽度一致。
<h3>代码实现</h3>
以下是 <code>/app/components/Main.tsx</code> 的初始代码：
<div class="md-code-block">
<div class="md-code-block-banner-wrap">
<div class="md-code-block-banner">
<div class="md-code-block-infostring">tsx</div>
<div class="md-code-block-action">
<div class="ds-markdown-code-copy-button">复制</div>
</div>
</div>
</div>
<pre><section className="w-full max-w-7xl mx-auto px-5 py-24 pt-32">
<div className="flex flex-col md:flex-row items-center">
 <div className="md:w-1/2 md:pr-16 flex flex-col items-center md:items-start text-center md:text-left mb-16 md:mb-0">
 <h1 className="italic text-4xl mt-4 sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
 100% Free Domain Name Provider
 </h1>
 className="mb-8 text-lg text-gray-600">
 Our mission is to empower individuals worldwide to grow their
 digital presence and contribute to the global digital economy. Our
 free domains function identically to any paid domain, allowing you
 to create websites, blogs, email accounts, and more. You have the
 flexibility to use these domains directly or with URL forwarding,
 giving you full control over your online identity – all at no
 cost.
 </p>
 <Link
 href="/login"
 className="inline-flex items-center px-6 py-3 text-white bg-blue-600 rounded-md hover:bg-blue-700 transition duration-300"
 >
 Try it now
 <svg
 xmlns="http://www.w3.org/2000/svg"
 className="h-5 w-5 ml-2"
 viewBox="0 0 20 20"
 fill="currentColor"
 >
 <path
 fillRule="evenodd"
 d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
 clipRule="evenodd"
 />
 </svg>
 </Link>
 </div>
 <div className="md:w-1/2">
 <Image
 src="/what_is_a_dns_server_dns_lookup.png"
 alt="DNS Illustration"
 width={500}
 height={500}
 className="w-full max-w-lg mx-auto"
 />
 </div>
</div>
</section></pre>
</div>
<h3>效果展示</h3>
通过上述代码，我们实现了一个主题展示的模块。该模块包含一个标题、一段描述性文字和一个按钮，用户点击按钮后可以导航到登录页面。此外，我们还添加了一张图片，用于增强页面的视觉效果。
<img src="https://pic.dataeast.cn/picture/20241107214400.png">
<h3>下一步计划</h3>
在接下来的文章中，我们将继续实现“查询可用子域名”功能，并学习如何使用事件处理器（Event Handlers）来响应用户的操作。敬请期待！
<h3>更多资源</h3>
如果您喜欢这篇文章，欢迎访问我的技术博客获取更多详细内容：
<ul>
<li>
独立博客: https://www.dataeast.cn/
</li>
<li>
CSDN博客: https://blog.csdn.net/siberiaWarpDrive
</li>
<li>
B站视频空间: https://space.bilibili.com/25871614
</li>
<li>
微信公众号: 关注 “曲速引擎 Warp Drive”
</li>
</ul>
<img src="https://pic.dataeast.cn/picture/20241016170749.png">
通过这些平台，您可以获取更多关于Next.js实战开发的详细教程和最新动态。感谢您的支持！ 
来源：https://www.cnblogs.com/XiaoH160309/p/18534087

頁: [1]

琼殿技术论坛's Archiver

Next.js 实战开发入门教程敏捷开发框架