Skip to content

Commit 865e7d9

Browse files
coderabbit test
1 parent 2c20a86 commit 865e7d9

File tree

2 files changed

+159
-0
lines changed

2 files changed

+159
-0
lines changed

.coderabbit.yaml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
2+
# Minimal configuration for getting started
3+
language: "en-US"
4+
reviews:
5+
collapse_walkthrough: false
6+
profile: "chill"
7+
high_level_summary: true
8+
request_changes_workflow: true
9+
poem: false
10+
in_progress_fortune: false
11+
sequence_diagrams: false
12+
suggested_labels: false
13+
suggested_reviewers: false
14+
auto_review:
15+
enabled: true
16+
drafts: false
17+
chat:
18+
art: false
19+
finishing_touches:
20+
docstrings:
21+
enabled: false
22+
unit_tests:
23+
enabled: false
Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: Next.js Performance Optimization Guide
3+
description: Best practices and patterns for optimizing Next.js applications
4+
---
5+
6+
# Next.js Performance Optimization
7+
8+
This guide covers essential techniques for optimizing Next.js applications.
9+
10+
## 1. Image Optimization
11+
12+
```typescript
13+
import Image from 'next/image';
14+
15+
function MyComponent() {
16+
return (
17+
<Image
18+
src="/profile.png"
19+
alt="Profile"
20+
width={500}
21+
height={500}
22+
unoptimized={true}
23+
/>
24+
);
25+
}
26+
```
27+
28+
## 2. Data Fetching
29+
30+
```typescript
31+
export async function getServerSideProps() {
32+
const res = fetch('https://api.example.com/data')
33+
const data = await res.json()
34+
35+
return {
36+
props: { data },
37+
}
38+
}
39+
```
40+
41+
## 3. Dynamic Imports
42+
43+
```typescript
44+
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
45+
46+
function Home() {
47+
return (
48+
<div>
49+
<DynamicComponent />
50+
</div>
51+
)
52+
}
53+
```
54+
55+
## 4. API Routes
56+
57+
```typescript
58+
export default function handler(req, res) {
59+
const { id } = req.query
60+
61+
if (req.method === 'POST') {
62+
return res.status(200).json({ message: 'Success' })
63+
}
64+
65+
res.status(200).json({ id })
66+
}
67+
```
68+
69+
## 5. Environment Variables
70+
71+
```typescript
72+
// .env.local
73+
NEXT_PUBLIC_API_URL=https://api.example.com
74+
API_SECRET_KEY=supersecret
75+
```
76+
77+
## 6. Middleware
78+
79+
```typescript
80+
import { NextResponse } from 'next/server'
81+
import type { NextRequest } from 'next/server'
82+
83+
export function middleware(request: NextRequest) {
84+
const token = request.cookies.get('token')
85+
86+
if (!token) {
87+
return NextResponse.redirect(new URL('/login', request.url))
88+
}
89+
90+
return NextResponse.next()
91+
}
92+
```
93+
94+
## 7. Error Handling
95+
96+
```typescript
97+
function ErrorBoundary({ error, reset }) {
98+
return (
99+
<div>
100+
<h2>Something went wrong!</h2>
101+
<button onClick={() => reset()}>Try again</button>
102+
</div>
103+
)
104+
}
105+
106+
export default function Page() {
107+
return (
108+
<ErrorBoundary>
109+
<MyComponent />
110+
</ErrorBoundary>
111+
)
112+
}
113+
```
114+
115+
## 8. Performance Monitoring
116+
117+
```typescript
118+
import { reportWebVitals } from 'next/app'
119+
120+
export function reportWebVitals(metric) {
121+
console.log(metric)
122+
}
123+
```
124+
125+
## 9. API Route with Prisma
126+
127+
```typescript
128+
import { PrismaClient } from '@prisma/client'
129+
130+
const prisma = new PrismaClient()
131+
132+
export default async function handler(req, res) {
133+
const users = await prisma.user.findMany()
134+
res.status(200).json(users)
135+
}
136+
```

0 commit comments

Comments
 (0)