2 मिनट में Next.js को समझें: सर्वोत्तम React फ्रेमवर्क!

1// app/blog/page.tsx
2import { PostList } from '@/components/server/PostList';
3import { Suspense } from 'react';
4
5export default async function BlogPage() {
6  return (
7    <main className="container mx-auto px-4 py-8">
8      <h1 className="text-4xl font-bold mb-8">हमारा ब्लॉग</h1>
9      <Suspense fallback={<p>पोस्ट लोड हो रहे हैं...</p>}>
10        <PostList />
11      </Suspense>
12    </main>
13  );
14}
15
16// components/server/PostList.tsx
17async function getPosts() {
18  const posts = await db.post.findMany();
19  return posts;
20}
21
22export async function PostList() {
23  const posts = await getPosts();
24
25  return (
26    <div className="grid gap-6 md:grid-cols-2">
27      {posts.map(post => (
28        <article key={post.id} className="p-4 rounded-lg border">
29          <h2 className="text-xl font-semibold">{post.title}</h2>
30          <p className="mt-2 text-gray-600">{post.excerpt}</p>
31        </article>
32      ))}
33    </div>
34  );
35}

1// components/client/SearchBar.tsx
2'use client';
3
4import { useState } from 'react';
5import { useRouter } from 'next/navigation';
6
7export function SearchBar() {
8  const [query, setQuery] = useState('');
9  const router = useRouter();
10
11  function handleSearch(e: React.FormEvent) {
12    e.preventDefault();
13    router.push(`/search?q=${encodeURIComponent(query)}`);
14  }
15
16  return (
17    <form onSubmit={handleSearch} className="flex gap-2">
18      <input
19        type="search"
20        value={query}
21        onChange={(e) => setQuery(e.target.value)}
22        placeholder="खोजें..."
23        className="px-4 py-2 rounded border"
24      />
25      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
26        खोजें
27      </button>
28    </form>
29  );
30}

1// lib/actions.ts
2'use server';
3
4import { revalidatePath } from 'next/cache';
5import { redirect } from 'next/navigation';
6import { z } from 'zod';
7
8const PostSchema = z.object({
9  title: z.string().min(3, "शीर्षक में कम से कम 3 अक्षर होने चाहिए"),
10  content: z.string().min(10, "सामग्री में कम से कम 10 अक्षर होने चाहिए")
11});
12
13export async function createPost(formData: FormData) {
14  const data = {
15    title: formData.get('title'),
16    content: formData.get('content')
17  };
18
19  const result = PostSchema.safeParse(data);
20
21  if (!result.success) {
22    return { error: result.error.flatten() };
23  }
24
25  const post = await db.post.create({
26    data: result.data
27  });
28
29  revalidatePath('/blog');
30  redirect('/blog');
31}
32
33// app/blog/new/page.tsx
34import { createPost } from '@/lib/actions';
35
36export default function NewPostPage() {
37  return (
38    <form action={createPost} className="space-y-4 max-w-lg mx-auto">
39      <div>
40        <label htmlFor="title" className="block text-sm font-medium">
41          शीर्षक
42        </label>
43        <input
44          type="text"
45          name="title"
46          id="title"
47          required
48          className="mt-1 block w-full rounded-md border-gray-300"
49        />
50      </div>
51      <div>
52        <label htmlFor="content" className="block text-sm font-medium">
53          सामग्री
54        </label>
55        <textarea
56          name="content"
57          id="content"
58          required
59          rows={5}
60          className="mt-1 block w-full rounded-md border-gray-300"
61        />
62      </div>
63      <button
64        type="submit"
65        className="w-full py-2 px-4 bg-blue-500 text-white rounded-md"
66      >
67        प्रकाशित करें
68      </button>
69    </form>
70  );
71}