Next.js: The Definitive Guide to the Most Popular React Framework
Next.js has become the most popular React framework for building modern web applications. With its focus on server-side rendering (SSR), static generation, and an excellent development experience, Next.js offers everything you need to build high-performance, scalable web applications.
Why Next.js?
Main Features
-
Hybrid Rendering
- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
- Client-Side Rendering (CSR)
- Incremental Static Regeneration (ISR)
-
Automatic Optimizations
- Image Optimization
- Font optimization
- Script optimization
- Zero config
-
Developer Experience
- Fast Refresh
- TypeScript Support
- File-system routing
- API Routes
First Steps
Creating a Project
npx create-next-app@latest mi-proyecto cd mi-proyecto npm run dev
Project Structure
├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── public/ │ └── images/ ├── components/ │ └── ui/ ├── lib/ ├── next.config.js └── package.json
Routing in Next.js 14
Basic Pages
// app/page.tsx
export default function Home() {
return (
<main>
<h1>Bienvenidos a Next.js</h1>
</main>
);
}
Dynamic Routes
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
return (
<article>
<h1>Post: {params.slug}</h1>
</article>
);
}
Shared Layout
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<nav>
{/* Navegación común */}
</nav>
{children}
</body>
</html>
);
}
Data Fetching
Server Components
// app/posts/page.tsx
async function getPosts() {
const res = await fetch('https://api.ejemplo.com/posts', {
next: { revalidate: 3600 } // Revalidar cada hora
});
return res.json();
}
export default async function Posts() {
const posts = await getPosts();
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</div>
);
}
Static Generation
// app/posts/[id]/page.tsx
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map((post) => ({
id: post.id.toString(),
}));
}
export default async function Post({ params }: { params: { id: string } }) {
const post = await getPost(params.id);
return (
<article>
<h1>{post.title}</h1>
<div>{post.content}</div>
</article>
);
}
API Routes
// app/api/posts/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
try {
const posts = await getPosts();
return NextResponse.json(posts);
} catch (error) {
return NextResponse.json(
{ error: 'Error al obtener posts' },
{ status: 500 }
);
}
}
export async function POST(request: Request) {
try {
const data = await request.json();
const newPost = await createPost(data);
return NextResponse.json(newPost, { status: 201 });
} catch (error) {
return NextResponse.json(
{ error: 'Error al crear post' },
{ status: 500 }
);
}
}
Optimizations
Images
import Image from 'next/image';
export default function Profile() {
return (
<Image
src="/perfil.jpg"
alt="Foto de perfil"
width={500}
height={300}
priority
/>
);
}
Fonts
import { Roboto } from 'next/font/google';
const roboto = Roboto({
weight: ['400', '700'],
subsets: ['latin'],
display: 'swap',
});
export default function Layout({ children }) {
return (
<div className={roboto.className}>
{children}
</div>
);
}
State Management
Client Components
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Contador: {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrementar
</button>
</div>
);
}
Stylization
CSS Modules
// components/Button.tsx
import styles from './Button.module.css';
export default function Button({ children }) {
return (
<button className={styles.button}>
{children}
</button>
);
}
Tailwind CSS
export default function Card({ title, content }) {
return (
<div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div>
<div className="text-xl font-medium text-black">{title}</div>
<p className="text-gray-500">{content}</p>
</div>
</div>
);
}
Middleware
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
// Verificar autenticación
const token = request.cookies.get('token');
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: '/dashboard/:path*',
};
Testing
// __tests__/Home.test.tsx
import { render, screen } from '@testing-library/react';
import Home from '@/app/page';
describe('Home', () => {
it('renders a heading', () => {
render(<Home />);
const heading = screen.getByRole('heading', { level: 1 });
expect(heading).toBeInTheDocument();
});
});
Deployment
Production Configuration
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['tu-dominio.com'],
},
async redirects() {
return [
{
source: '/old-page',
destination: '/new-page',
permanent: true,
},
];
},
};
module.exports = nextConfig;
Best Practices
- Code Organization
app/
├── (auth)/
│ ├── login/
│ └── register/
├── (dashboard)/
│ ├── profile/
│ └── settings/
└── (marketing)/
├── about/
└── contact/
- Handling Error
// app/error.tsx
'use client';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div>
<h2>¡Algo salió mal!</h2>
<button onClick={() => reset()}>Intentar de nuevo</button>
</div>
);
}
- Loading States
// app/loading.tsx
export default function Loading() {
return (
<div className="flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
</div>
);
}
Conclusion
Next.js 14 offers:
- Exceptional performance
- Excellent DX (Developer Experience)
- Scalability
- Rendering flexibility
- Seamless integration with React
It is the ideal choice for:
- Business web applications
- E-commerce sites
- SaaS Applications
- Dynamic content sites
Additional Resources
- Official Documentation
- Next.js Examples
- Learn Next.js
- Vercel Blog
Are you using Next.js in your projects? What features do you find most useful? Share your experience in the comments! ?
nextjs #react #webdev #javascript
The above is the detailed content of Next.js: The Definitive Guide to the Most Popular React Framework. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
How to implement panel drag and drop adjustment function similar to VSCode in front-end development?
Apr 04, 2025 pm 02:06 PM
Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
