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 a docker-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

https://tailwindcss.com/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)背景

(5)定位position

  • absolute 生成绝对定位的元素,相对于static定位意外的第一个父元素进行定位
  • relative 生成相对定位的元素,相对于其正常位置进行定位(上下移动行内元素最简单的方式)
  • Fixed 生成固定定位的元素,相对于浏览器窗口进行定位

(6)溢出

  • overflow: hidden
  • overflow: scroll
posted @   ForHHeart  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 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
点击右上角即可分享
微信分享提示