Next.js15: Everything You Need to Know About it
Next.js is a renowned React framework developed by Vercel. It enables web developers to create user-friendly static websites and web applications. Next.js was first released in 2016. However, it has come a long way since then. The framework has added numerous features and brought tons of improvements. Next.js 15 is the latest release of the framework. Let us find out how it is different from previous versions. What is New in Next.js 15? According to Vercel, Next.js 15 brings a wealth of improvements helping developers boost their workflow. Let us find out what is new in this version. Support for React19 One of the primary features you get in Next.js 15 is the support for React 19. The framework offers support for the following integrations: React Compiler This experimental compiler focuses on optimizing the performance and efficiency of React applications. Hydration Error Improvements This integration improves the hydration process making it more powerful and error-resistant. Web developers experience a smooth transition from server-rendered HTML to fully interactive React components. Server Actions Server Actions are a crucial feature enabling developers to run server-side codes within React components. It improves the workflow by minimizing the need for API routes. Since developers can embed server actions in the same file as components, they can maintain a clean and modern codebase. Besides, Server Actions improve security as sensitive operations are managed server-side. It naturally minimizes the risk of exposing sensitive data to the client. TypeScript Support TypeScript has turned into an essential tool for modern web development. Next.js 15 has brought significant improvement in its TypeScript support. You get improved TypeScript integration. It helps developers build and maintain type-safe applications. Next.js 15 provides seamless integration with the latest TypeScript features. Developers get better Type inference and accurate error reporting. Furthermore, Next.js 15 offers comprehensive support for TypeScript configuration files. Consequently, users get better control over the TypeScript compiler options and project structure. Support for Environment Variables & Configurations With Next.js 15, you notice a noteworthy improvement in support for environment variables and configuration management. Managing application settings across various environments gets much easier now. Developers can now define environment-specific settings, thanks to the new configuration API. Apart from this, managing and deploying applications across different stages of development and production is straightforward. Caching Overhaul You can notice the following changes in caching behavior in Next.js 15 RC. Web developers get better control and flexibility over how data fetching is handled. Fetch requests do not get cached by default now. Like fetch requests, GET route handlers won’t cache responses by default. Therefore, users are served with the latest data. In Next.js 15 RC, navigations on the client side bypass the cache. It offers predictable and dynamic user experience. Middleware Improvements Next.js 15 comes with advanced middleware capabilities. It provides support for asynchronous operations and middleware chaining. Developers can perform authentication, data manipulation, and logging before rendering the page. Creating multiple middleware functions and executing them sequentially is much easier now. It supports better organization and reuse of codes. Asynchronous middleware operations support quick request handling. They do not let complex jobs block the main thread. Routing & Nested Layouts Nested layouts in Next.js 15 enable developers to make complex and reusable UI structures. These layouts help them define parent and child layouts. It means users can maintain a well-organized component hierarchy. This feature is particularly beneficial for apps having multiple dashboards with common UI elements. Next.js 15 also features a flexible and improved routing system. The updated routing API supports dynamic route segments and custom route matching. Apart from this, the framework has improved the handling of its nested routes. Web Vitals Attribution Next.js 15 lets developers track web vitals. Therefore, they get granular insights into their application’s performance and learn about possible bottlenecks. Data Fetching with SWR Delta Another major update you can see in Next.js 15 is data fetching with the Stale-While-Revalidate (SWR) delta. It builds on a powerful SWR library by introducing delta synchronization. It enables applications to fetch the changes (delta) from the last request. SWR Delta does not re-fetch the entire dataset. It optimizes the amount of data transferred over the network. Consequently, users experience fast load time and a reduction in bandwidth usage. This feature is quite helpful for developers developing applications with frequent data changes, such as real-time dashboards. Final words The release of Next.js 15 has brought several enhancements to the framework. From Server Actions to improved routing to in-depth TypeScript support, the framework is empowering developers. They can develop apps faster without compromising on scalability. All in all, Next.js 15 is an ideal choice for modern web development. It has set new standards for web development frameworks. Try it if you have not already.
How the New TypeScript 4.9+ Streamlines the Type Safety in Storybook 7.0?
TypeScript is popularly used for JavaScript extension and data specification in the industry. As it reports unmatched types, writing in TypeScript can ensure productivity and optimal developer experience while coding. If we are onto using TypeScript, Storybook 7.0 is worth mentioning. That’s because it allows you to write in TypeScript without any configuration setup and boost your experience with built-in APIs. With the launch of Storybook 7.0, the tool rectified all the pain points in the previous version. Now, you get a combination of CSF 3 and the new TypeScript 4.9+ operator to bolster accuracy and safety. Read on to explore how this combination can make your coding more productive and safer while using the latest Storybook 7.0. Storybook 7.0 — An Introduction to Update 8/18 Storybook 7.0 or update 8/18 is a core upgrade of Storybook focused on better interaction testing and user experience. You get 3.5% more screen space for Canvas with over 196 icons available for complete customizations. By the same token, Storybook 7.0 is more compatible in integrating with Remix, Qwik, and SolidJS. The also features some documentation upgrades such as MDX 2 and simplified import of stories. Lastly, the most exclusive upgrade is the combination of TypeScript 4.9+ and CSF3. Let’s see what makes it a big highlight! What is TypeScript 4.9+? TypeScript 4.9+ is a statically-typed superset of JavaScript that provides additional features such as type annotations, interfaces, and generics. It enables developers to write more maintainable and scalable code by catching potential errors at compile-time rather than runtime. One of the key benefits of using TypeScript with Storybook 7.0 is that it allows developers to specify the expected types of props and events for each component. This ensures that any components that use these props and events are properly typed and provide a clear contract for how they should be used. In addition to these benefits, TypeScript can also improve the documentation and discoverability of UI components in Storybook 7.0. By leveraging TypeScript’s support for JSDoc annotations, developers can document the expected usage of each component and generate API documentation automatically. Look at the difference between TypeScript types in Storybook 6 and Storybook 7.0 below. Combination of CSF3 Syntax and TypeScript 4.9+ In addition to TypeScript 4.9+, the Component Story Format (CSF) also received an upgrade from version CSF 2 to CSF3. The combination of both offer enhanced type safety, better in-editor type checking, and Codemod for easy upgrades. Here are the top elements of this incredible combination! StoryObj Type With the upgrade CSF3, you now get access to the StoryObj type that manipulates stories as objects and infers the type of component props. The feature was still there but the previous story was not so powerful to automatically infer prop types. On the other hand, this new syntax depreciates React-Specific ComponentMeta and ComponentStory using React, Vue, Svelte, and Angular. Check the result with a side-by-side comparison of CSF2 and CSF3 given below satisfies Operator satisfies Operator is the most useful feature of TypeScript 4.9+ for strict type checking. Pair CSF3 with satisfies operator to better type safety and fix unspecified/specified issues. Take a look at the below example where TypeScript is not raising any issue for unspecified label arg. If you use satisfies operator, you can fix that issue as we did below. // Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { title: 'Example/Button', component: Button, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { primary: true, }, }; After fixing the issue, you can expect TypeScript to provide an error for unspecified arg. Auto-infer Component Level args Pairing the CSF and TypeScript is good but it will not infer the types automatically unless you specify the connection. In this scenario, TypeScript will show errors on the stories even if you have provided a label in meta-level args. That’s where auto-infer component level args come up to specify the connection between CSF and TypeScript. To make them understand the connection, you need to pass the typeof meta to StoryObj at both story and meta-level. Here’s how you can do it! // Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { title: 'Example/Button', component: Button, args: { label: 'Default', }, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; // 👇 TS won't complain about the "label" missing export const Primary: Story = { args: { primary: true, }, }; const Secondary: Story = { args: { disabled: false } }; const Disabled: Story = { args: { disabled: true } }; Vue As discussed above, Storybook 7.0 is more compatible with modern frameworks. Vue is the best example of that but you need to set up an ideal environment. Look for SFC files with vue-tsc and access the editor support in VSCode. Take a look at the Vue3 single file component. <script setup lang="ts"> defineProps<{ count: number, disabled: boolean }>() const emit = defineEmits<{ (e: 'increaseBy', amount: number): void; (e: 'decreaseBy', amount: number): void; }>(); </script> <template> <div class="card"> {{ count }} <button @click="emit('increaseBy', 1)" :disabled='disabled'> Increase by 1 </button> <button @click="$emit('decreaseBy', 1)" :disabled='disabled'> Decrease by 1 </button> </div> </template> Svelte Like Vue, Svelte features excellent support for TypeScript and enables .svelte files. You can utilize svelte-check and add VSCode editor support to run type checks. Consider the following component as an example. <script lang="ts"> import { createEventDispatcher } from 'svelte'; export let count: number; export let disabled: boolean; const dispatch = createEventDispatcher(); </script> <div class="card"> {count} <button on:click={() => dispatch('increaseBy', 1)} {disabled}> Increase by 1 </button> <button on:click={() => dispatch('decreaseBy', 1)} {disabled}> Decrease by 1 </button> </div> Conclusion: Conclusively, the new TypeScript 4.9+ features in Storybook 7.0 have greatly improved the type safety and developer experience for creating UI components. With the addition of advanced type inference capabilities, developers can now create reusable components with
