Skip to content

Commit c09a774

Browse files
committed
fix
1 parent 4540ce2 commit c09a774

File tree

1 file changed

+20
-11
lines changed

1 file changed

+20
-11
lines changed

docs/Nextjs/intro-nextjs.md

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Next.js offers both <a href="https://nextjs.org/docs/getting-started">free</a> a
3838
### The Modern Web Development Challenge
3939

4040
Building a production-ready React application traditionally requires assembling numerous tools and libraries:
41+
4142
- **Routing**: React Router or similar libraries for navigation
4243
- **Data Fetching**: Custom solutions or libraries like SWR or React Query
4344
- **Styling**: CSS-in-JS libraries, CSS Modules configuration
@@ -83,9 +84,9 @@ Imagine you're building an online store. Different pages have different requirem
8384
Next.js empowers you to **mix and match** these strategies within the same application, choosing the optimal approach for each page. This flexibility is what makes Next.js stand out from other frameworks.
8485
:::
8586

86-
<BrowserWindow url="https://nextjs.org/" bodyStyle={{padding: 0}}>
87-
[![Next.js Framework](./assets/nextjs-logo.png)](https://nextjs.org/)
88-
</BrowserWindow>
87+
<BrowserWindow url="https://nextjs.org/" bodyStyle={{padding: 0}}>
88+
[![Next.js Framework](./assets/nextjs-logo.png)](https://nextjs.org/)
89+
</BrowserWindow>
8990

9091
## Understanding React and React Frameworks
9192

@@ -144,24 +145,27 @@ Similarly, React provides the core functionality for building UIs, but a complet
144145

145146
:::
146147

147-
## Why Learn Next.js in 2024 and Beyond?
148+
## Why Learn Next.js in 2025 and Beyond?
148149

149150
Next.js has become the **industry standard** for building React applications, and for good reason. Learning Next.js opens doors to:
150151

151152
### Career Opportunities
153+
152154
- **High Demand**: Companies worldwide are actively hiring Next.js developers
153155
- **Competitive Salaries**: Next.js expertise commands premium compensation
154156
- **Startup Favorite**: The go-to choice for startups building MVPs quickly
155157
- **Enterprise Adoption**: Used by Fortune 500 companies for mission-critical applications
156158

157159
### Technical Advantages
160+
158161
- **Unified Stack**: Build frontend and backend in one codebase using JavaScript/TypeScript
159162
- **Future-Proof**: Regular updates and backing from Vercel ensures long-term support
160163
- **Performance by Default**: Automatic optimizations that would take months to implement manually
161164
- **SEO Excellence**: Built-in features that make your content discoverable by search engines
162165
- **Developer Experience**: Exceptional DX with features like Fast Refresh, detailed error messages, and TypeScript support
163166

164167
### Practical Benefits
168+
165169
You can build **any type** of web application with Next.js:
166170
- 📱 **Landing Pages & Marketing Sites** - Fast, SEO-optimized, and beautiful
167171
- 🛒 **E-commerce Platforms** - Dynamic product pages with excellent performance
@@ -305,28 +309,32 @@ npm run lint # Run ESLint to check code quality
305309

306310
Now that you understand what Next.js is and why it's valuable, here's your learning roadmap:
307311

308-
**Phase 1: Foundations (Week 1-2)**
312+
### Phase 1: Foundations (Week 1-2)
313+
309314
1. ✅ Complete this introduction (You are here!)
310315
2. Create your first Next.js project
311316
3. Understand the file-based routing system
312317
4. Learn about pages and layouts
313318
5. Practice with basic components
314319

315-
**Phase 2: Core Features (Week 3-4)**
320+
### Phase 2: Core Features (Week 3-4)
321+
316322
1. Master data fetching patterns (SSG, SSR, ISR)
317323
2. Work with the Image and Link components
318324
3. Implement dynamic routes
319325
4. Add API routes or Server Actions
320326
5. Deploy your first app to Vercel
321327

322-
**Phase 3: Advanced Concepts (Week 5-8)**
328+
### Phase 3: Advanced Concepts (Week 5-8)
329+
323330
1. Implement authentication
324331
2. Work with databases (Prisma, MongoDB, etc.)
325332
3. State management (Context API, Zustand, Redux)
326333
4. Middleware and authentication flows
327334
5. Performance optimization techniques
328335

329-
**Phase 4: Production Ready (Week 9+)**
336+
### Phase 4: Production Ready (Week 9+)
337+
330338
1. Testing (Jest, React Testing Library, Playwright)
331339
2. CI/CD pipelines
332340
3. Monitoring and analytics
@@ -336,12 +344,13 @@ Now that you understand what Next.js is and why it's valuable, here's your learn
336344
### Helpful Resources
337345

338346
- 📖 **Official Documentation**: [nextjs.org/docs](https://nextjs.org/docs) - Comprehensive and well-maintained
339-
- 🎓 **Next.js Learn**: [nextjs.org/learn](https://nextjs.org/learn) - Interactive tutorials
347+
- 🎓 **Next.js Learn**: [nextjs.org/learn](https://nextjs.org/learn) - Interactive tutorials from the official team
340348
- 💬 **Community**: Join the [Next.js Discord](https://nextjs.org/discord) for help and discussions
341349
- 📺 **YouTube**: Countless tutorials from Vercel and the community
342-
- 📝 **Blog**: [vercel.com/blog](https://vercel.com/blog) - Latest updates and best practices
350+
- 📝 **Vercel Blog**: [vercel.com/blog](https://vercel.com/blog) - Latest updates and best practices
351+
352+
### Video Tutorial
343353

344-
### Watch the Video Tutorial
345354
<iframe width="880" height="480" src="https://www.youtube.com/embed/wm5gMKuwSYk" title="Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
346355

347356
## Conclusion

0 commit comments

Comments
 (0)