Build Lightweight AI SaaS: Next.js + Tailwind CSS
前端框架:Next.js
UI 组件:Tailwind CSS, Shadcn UI
AI 集成:Anthropic Claude API, Anthropic Claude API Keys
1 Next.js
1.1 Initialization
1. For the installation, you can refer https://ui.shadcn.com/docs/installation/next
# Choose the path to build your new project
cd your_path_to_put_your_new_project_folder
# Initialize the project by shadcn ui (default setting: New York/Zinc/Yes)
npx shadcn@latest init -d
# Select the options
/Yes [press enter]
/my-app [edit to your custom name]
2. Initialize the app/layout.tsx
and app/page.tsx
layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Cactus AI",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
page.tsx
export default function RootPage = () => {
return (
<div className="h-screen">
Hello World!
</div>
);
}
3. Add components(e.g. Button) in the /components/ui/
, follow this step:
npx shadcn@latest add button
4. Run the Next.js server
cd your_app_name
npm run dev
1.2 Project Structure
A Next.js project example
your_app_name/
├── app/ # "/"
│ ├── api/ # "/api" for the backend logic
│ │ ├── hanyuxinjie/
│ │ │ ├── route.ts # Handles AI requests for "/api/hanyuxinjie/"
│ │ ├── social-card/
│ │ │ ├── route.ts # Handles AI requests for "/api/social-card/"
│ ├── social-card/ # "/social-card"
│ │ ├── page.tsx
│ ├── fonts/ # Custom fonts for typography
│ │ ├── GeistMonoVF.woff
│ │ ├── GeistVF.woff
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
├── components/ # Usable global components
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ ├── sonner.tsx
│ ├── footer.tsx
│ ├── header.tsx
│ ├── word-rotate.tsx
│ ├── icons.tsx
│ ├── hero-typewriter.tsx
│ ├── PresetTemplateGrid.tsx
│ ├── social-card-generator.tsx
│ ├── svg-generator.tsx
├── lib/ # Helper files and constants.
│ ├── constants.ts
│ ├── utils.ts
├── public/ # Static assets (e.g., images).
│ ├── logo.png
├── .env.example # Environment variables template.
├── .eslintrc.json
├── .gitignore
├── README.md
├── components.json # Component configuration or mappings.
├── next.config.mjs
├── .nixpacks.toml
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
├── Dockerfile # Dockerfile for containerizing the app.
├── docker-compose.yml # Docker Compose file for managing services.
1.3 App Router
https://nextjs.org/docs/app/building-your-application/routing/defining-routes
- Dynamic Routes
- Nested Routes
- Group Routes
1.4 Docker
To containerize your Next.js project using Docker, you can create a
Dockerfile
and adocker-compose.yml
. Here's how to set it up:
1. Create a Dockerfile
In the root of your project, create a Dockerfile
. Here's an example:
# Stage 1: Build Stage
FROM node:18-alpine AS builder
# Set working directory
WORKDIR /app
# Copy package.json and pnpm lock file
COPY package.json pnpm-lock.yaml ./
# Install pnpm and project dependencies
RUN npm install -g pnpm && pnpm install --frozen-lockfile
# Copy all files to the working directory
COPY . .
# Build the Next.js project
RUN pnpm run build
# Stage 2: Production Image
FROM node:18-alpine AS runner
WORKDIR /app
# Copy only necessary files for production
COPY --from=builder /app/package.json ./
COPY --from=builder /app/pnpm-lock.yaml ./
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
# Set environment variables
ENV NODE_ENV=production
# Expose the Next.js port
EXPOSE 3000
# Run the Next.js application
CMD ["pnpm", "start"]
2. Create a docker-compose.yml
If you want to use Docker Compose to manage your development setup, you can create a docker-compose.yml
in the root directory.
version: '3'
services:
web:
build: .
ports:
- "3000:3000"
environment:
NODE_ENV: development
volumes:
- .:/app
- /app/node_modules
command: pnpm run dev
3. Update next.config.mjs
for Production
Ensure your next.config.mjs
is optimized for a production environment. For example, it should enable compression and other optimizations.
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
reactStrictMode: true,
swcMinify: true,
compress: isProd,
};
4. Build and Run the Docker Image
To build the Docker image, run the following command in the root of your project:
docker build -t my-nextjs-app .
If you're using docker-compose
, simply run:
docker-compose up
2 Tailwind CSS
2.1 Docs
position-sticky top-0 bg-black
flex justify-between
container
mx-auto
text-white
text-3xl
font-bold
p-8
3. Frontend Basics
3.1 HTML
- 按
tab
自动生成 - 按
ctrl + D
复制该行
Label | Meaning | Properties |
---|---|---|
<div> |
块状元素 | |
<span> |
行间元素 | |
<h1> - <h6> |
标题 | |
<i> |
icon图标 | |
<strong> |
字体加粗 | |
<a> |
超链接 | |
<img> |
插入图片 | |
<video> |
插入视频 | controls |
<input> |
表单(输入账号、密码的框) | type='text' type='password' |
<textarea> |
表单(支持多行) | |
<button> |
按钮 |
3.2 CSS
3.2.1 CSS布局思路
(1) 盒子模型
Label | Meaning | Properties |
---|---|---|
margin |
外边距 | |
padding |
内边距 | |
border |
边框 | |
box-shadow |
阴影 | |
box-redius |
边角 | |
word-wrap: break-word |
内容 |
(2) flex布局
https://www.runoob.com/w3cnote/flex-grammar.html
Label | Meaning | Properties |
---|---|---|
flex-direction |
row | column | |
flex-wrap |
wrap | |
justify-content |
flex-start | flex-end | center | space-between | space-around | |
align-items |
flex-start | flex-end | center | baseline | stretch |
3.2.2 CSS布局元素
(1)宽度width
- 固定宽度 百分比宽度
- 最大宽度
- 最小宽度
- 水平居中
margin: auto
(2)高度height
- 固定高度(必须)
- 最大高度
- 最小高度
- 行高对齐
line-height
(3)字体
- 颜色
color
十六进制、rgb、英文 - 大小
font-size
- 粗细
font-weight: bold
(4)背景
- https://tool.oschina.net/commons?type=3
- 颜色
background-color
- 图片
background-img: url(...)
(5)定位position
absolute
生成绝对定位的元素,相对于static定位意外的第一个父元素进行定位relative
生成相对定位的元素,相对于其正常位置进行定位(上下移动行内元素最简单的方式)Fixed
生成固定定位的元素,相对于浏览器窗口进行定位
(6)溢出
overflow: hidden
overflow: scroll
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
2023-09-13 DS/MLE Key Competency and Occupational Classification Concluded from Job Descriptions