Next.js 15: All the New Features to Discover

As you might know, Next.js 15 is here! 🎉 And, as usual, it comes packed with goodies. From new hooks to lightning-fast bundling with Turbopack, and enhanced TypeScript optimization, front-end developers have plenty to be excited about. Let's review all these new features and see how to make the most of them. Ready? Let's dive in! 🚀

1. New Hooks: Improving the Development Experience

useServerContext and useClientContext: Simplified Context Management

The useServerContext and useClientContext hooks provide native management of server and client-specific contexts. No more juggling between environments! With these hooks, you can directly access relevant data based on the environment, all in a straightforward way.

typescript

typescript

These hooks enable smoother management of server and client-specific information without compromising performance. Pretty handy, right? 😉

useLoadingState: Native Loading Management

The useLoadingState hook simplifies loading state management, offering a native alternative to more hacky approaches. Perfect for knowing when to display loaders!

typescript

With useLoadingState, you can keep track of loading states natively, enabling better UX without cluttering your code.

2. Turbopack: Ultra-Performance Bundling 🚀

Meet Turbopack, Next.js's new bundler! Designed to leverage multithread architecture, Turbopack drastically reduces build and rebuild times, especially for large projects. Say goodbye to long waits and hello to instant builds.

Enabling Turbopack

To enable Turbopack, simply add this experimental configuration to your next.config.js file:

typescript

Turbopack in Action

Turbopack works with a modular approach, analyzing only the necessary parts. The result? Faster builds and maximum development reactivity, even on large projects.

3. Enhanced Error Handling and Security 🔒

Next.js 15 also improves error handling, making error messages more precise and logs more comprehensive. This makes debugging faster and helps diagnose issues quickly in production.

Error Handling Example

Here's how to capture errors with Next.js to better handle critical cases:

typescript

These improvements simplify debugging and enhance security by limiting sensitive information exposure.

4. Server-Side Rendering and Streaming Improvements

For applications requiring fast server-side rendering (SSR), Next.js 15 improves SSR streaming, making the user experience smoother. Progressive rendering allows sending priority components as soon as they're ready, optimizing perceived loading time.

Using SSR Streaming

Imagine a product page where critical information like images and price should be displayed first:

typescript

This approach ensures users see essential information first, improving the loading experience.

5. Optimized TypeScript 💪

TypeScript fans won't be disappointed. Next.js 15 enhances TS support with:

• More precise types to avoid common errors,
• More performant type checking during build,
• Specific types for new APIs like useServerContext.

TypeScript Configuration

If not already done, Next.js generates an optimized tsconfig.json file for TypeScript, with a configuration that facilitates path management and module resolution:

typescript

This configuration helps reduce path conflicts and ensures modules are properly managed in your project.

Conclusion

Next.js 15 brings substantial improvements to speed up development and make our applications more performant. From hooks for context management to Turbopack for fast builds, TypeScript optimizations, and more. This update has everything needed to make your code shine and increase productivity. Ready to adopt these new features? Next.js 15 is waiting for you!

Happy coding and see you soon! 🚀

1// ServerComponent.tsx
2import { useServerContext } from 'next/hooks';
3
4interface ServerData {
5  username: string;
6  role: string;
7}
8
9function ServerComponent() {
10  const serverData = useServerContext<ServerData>(); // Server data typing
11  return <div>Server: {serverData.username} - {serverData.role}</div>;
12}
13export default ServerComponent;

1// ClientComponent.tsx
2import { useClientContext } from 'next/hooks';
3
4interface ClientData {
5  theme: string;
6  language: string;
7}
8
9function ClientComponent() {
10  const clientData = useClientContext<ClientData>(); // Client data typing
11  return <div>Client: {clientData.theme} - {clientData.language}</div>;
12}
13export default ClientComponent;

1import { useLoadingState } from 'next/hooks';
2
3function LoadingComponent() {
4  const isLoading = useLoadingState();
5  return (
6    <div>
7      {isLoading ? <p>Loading in progress...</p> : <p>Content loaded!</p>}
8    </div>
9  );
10}
11export default LoadingComponent;

1// next.config.js
2const nextConfig = {
3  experimental: {
4    enableTurbopack: true,
5  },
6};
7export default nextConfig;

1try {
2  // Operation that might fail
3} catch (error) {
4  console.error('Caught error:', error);
5  // More detailed logging here if needed
6}

1import { Suspense } from 'react';
2
3function ProductPage() {
4  return (
5    <>
6      <Suspense fallback={<p>Loading image...</p>}>
7        <ProductImage />
8      </Suspense>
9      <Suspense fallback={<p>Loading price...</p>}>
10        <ProductPrice />
11      </Suspense>
12    </>
13  );
14}
15export default ProductPage;

1// tsconfig.json
2{
3  "compilerOptions": {
4    "target": "es2020",
5    "module": "esnext",
6    "strict": true,
7    "baseUrl": ".",
8    "paths": {
9      "@/components/*": ["components/*"]
10    }
11  },
12  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
13  "exclude": ["node_modules"]
14}