ffsshhttiikk What I do
- Build server-side rendered React applications
- Create API routes and serverless functions
- Implement file-based routing with dynamic routes
- Use getStaticProps, getServerSideProps, and getStaticPaths
- Optimize performance with SSR, SSG, and ISR
- Handle authentication with NextAuth.js
- Use TypeScript for type safety
When to use me
When building modern React applications with SSR, API routes, or full-stack capabilities.
Pages Router
// pages/index.tsx
import { GetServerSideProps } from 'next'
interface Props {
data: User[]
}
export const getServerSideProps: GetServerSideProps<Props> = async () => {
const res = await fetch('https://api.example.com/users')
const data = await res.json()
return {
props: { data },
}
}
export default function Home({ data }: Props) {
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
App Router (Next.js 13+)
// app/page.tsx
import { getData } from '@/lib/data'
export default async function Page() {
const data = await getData()
return <main>{data.title}</main>
}
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/api/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
return NextResponse.json({ message: 'Hello' })
}
Dynamic Routes
// app/posts/[id]/page.tsx
interface Props {
params: { id: string }
}
export default async function Post({ params }: Props) {
const post = await fetchPost(params.id)
return <article>{post.content}</article>
}
export async function generateStaticParams() {
const posts = await fetchAllPosts()
return posts.map(post => ({ id: post.id }))
}
Client Components
'use client'
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return (
<button => setCount(c => c + 1)}>
Count: {count}
</button>
)
}
Server Actions
// app/actions.ts
'use server'
export async function createUser(formData: FormData) {
const name = formData.get('name')
// Database operation
await db.user.create({ name: name as string })
revalidatePath('/users')
}