Next.js, React को आधुनिक वेब विकास के लिए टूल्स का एक पूर्ण सूट बना देता है। इसका नवीनतम वर्जन क्रांतिकारी विशेषताएं लाता है जो वेब एप्लिकेशन बनाने के तरीके को बदल देती हैं। आइए जानें कि Next.js क्यों अनिवार्य बन गया है!
Next.js 15 की प्रमुख विशेषताएं 🎯
- App Router - एक आधुनिक फाइल सिस्टम-आधारित राउटिंग सिस्टम
- Server Components - डिफ़ॉल्ट रूप से सर्वर पर रेंडर किए गए React कंपोनेंट्स
- Server Actions - सीधे आपके कंपोनेंट्स से सर्वर म्यूटेशन्स
- Streaming - स्मूथ UX के लिए प्रोग्रेसिव पेज लोडिंग
- Smart Cache - स्वचालित डेटा कैशिंग
- Zero config - बिल्ट-इन ऑप्टिमाइजेशन के साथ उपयोग के लिए तैयार
क्विक स्टार्ट ⚙️
bash
1# नया प्रोजेक्ट बनाएं
2npx create-next-app@latest my-app --typescript --tailwind --app
3
4# डेवलपमेंट सर्वर शुरू करें
5cd my-app
6npm run dev
आधुनिक आर्किटेक्चर 📂
App Router एक अधिक सहज प्रोजेक्ट स्ट्रक्चर प्रस्तुत करता है:
plaintext
1my-app/
2├── app/
3│ ├── layout.tsx # रूट लेआउट
4│ ├── page.tsx # होम पेज (/)
5│ ├── loading.tsx # ग्लोबल लोडिंग
6│ ├── error.tsx # एरर हैंडलिंग
7│ ├── not-found.tsx # 404 पेज
8│ ├── blog/
9│ │ ├── page.tsx # /blog
10│ │ └── [slug]/
11│ │ └── page.tsx # /blog/:slug
12│ └── api/
13│ └── route.ts # API राउट्स
14├── components/
15│ ├── server/ # सर्वर कंपोनेंट्स
16│ ├── client/ # क्लाइंट कंपोनेंट्स
17│ └── ui/ # UI कंपोनेंट्स
18└── lib/
19 └── actions.ts # सर्वर एक्शंस
सर्वर कंपोनेंट्स ⚡️
कंपोनेंट्स बेहतर प्रदर्शन के लिए डिफ़ॉल्ट रूप से सर्वर पर रेंडर किए जाते हैं:
typescript
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}
क्लाइंट कंपोनेंट्स 🔄
इंटरैक्टिविटी की आवश्यकता वाले कंपोनेंट्स के लिए:
typescript
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}
सर्वर एक्शंस ⚡️
सीधे आपके कंपोनेंट्स से सर्वर-साइड म्यूटेशन्स:
typescript
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}
[बाकी सामग्री जारी...]
सारांश ✨
Next.js 15 React वेब विकास में एक बड़ी क्रांति का प्रतिनिधित्व करता है:
- सर्वर-फर्स्ट: बेहतर प्रदर्शन के लिए डिफ़ॉल्ट रूप से सर्वर कंपोनेंट्स
- सरलता: एक सहज फाइल-आधारित आर्किटेक्चर
- प्रदर्शन: स्वचालित ऑप्टिमाइजेशन और स्ट्रीमिंग
- बेहतर DX: आधुनिक सर्वर एक्शंस और API राउट्स
App Router, सर्वर कंपोनेंट्स, और सर्वर एक्शंस का संयोजन आधुनिक, कुशल और रखरखाव योग्य वेब एप्लिकेशन बनाने के लिए एक मजबूत आधार प्रदान करता है।
अब जब आप Next.js 14 की मूल बातें समझ गए हैं, आप आधुनिक और कुशल वेब एप्लिकेशन बनाने के लिए तैयार हैं! प्रत्येक अवधारणा में गहराई से जाने के लिए आधिकारिक दस्तावेज़ीकरण की जाँच करने में संकोच न करें। हैप्पी कोडिंग! 🚀
