Is Next.js Finally Typesafe?
Next.js is a popular open-source JavaScript framework that is used for building server-side rendered web applications. With the recent release of Next.js 11, there have been significant improvements in the area of type safety. But is Next.js finally typesafe?
What is Type Safety?
Type safety in a programming language refers to the ability to catch type-related errors at compile time, rather than runtime. This can help reduce the number of bugs and errors in a codebase, and make it easier to maintain and reason about. In JavaScript, which is a dynamically typed language, type safety can be achieved through the use of TypeScript, a superset of JavaScript that adds static types to the language.
Improvements in Next.js 11
In Next.js 11, there have been several improvements that make it easier to achieve type safety in Next.js applications. Some of the key improvements include:
- Improved TypeScript support: Next.js has improved its TypeScript support, making it easier to integrate TypeScript into a Next.js project and take advantage of its static typing features.
- Automatic TypeScript configuration: Next.js 11 introduces automatic TypeScript configuration, making it easier to set up TypeScript in a Next.js project without the need for manual configuration.
- TypeScript ESLint integration: Next.js now includes built-in support for TypeScript with ESLint, making it easier to enforce type safety and coding standards in a Next.js project.
Conclusion
With the improvements in Next.js 11, it is clear that the Next.js team is making an effort to improve type safety in Next.js applications. While Next.js may not be fully typesafe yet, it is certainly moving in the right direction. By taking advantage of the improvements in Next.js 11, developers can make their Next.js applications more typesafe and reduce the likelihood of type-related errors in their codebase.
TypeScript and Deno Fresh always get along.
Theo and Next.js sitting in a tree……
I'd rather have a stable framework than yet another "meh" feature. The issues I am following are open for months even years.
Love these next breakdowns. I learn something new each time
Note that even Next.js fixes the type inference issue eventually. This is still not type safety at all. At least from Theo's example, ”Date“ (object) type from Prisma will be converted to "string“ type after api call (over the wire). So the basic type inference will still provide you the wrong type. There are library like Superjson to handle this type of problems. If you don't use any of this type of helpers. Remember always provide your interpolate type to overwrite those unsupported "type" during this process to make it truly type safe. Or double check your code during the test and runtime check. Even a true static type safety can't solve everything.
There's definitely not just one way to do something but from my experience leaking your data model and not abstracting from your db layer all the way through to your frontend is bad.
Type inference is a really nice feature when used appropriately but the example given here only really works in small sites.
Anything of a certain size is going to be writing those types per domain/tier, yes you may encounter outdated types in your client but you don't risk the opposite which is coupling your UI to db/backend models that should remain a secret so you can keep them with a single responsibility.
I do think there is a time and a place for what's being suggested though, especially when you just gotta PoC something or a smaller project.
SvelteKit gives you the PageData type and it is a dream to use. I put my page specific components next to the +page.svelte file and use the PageData type to derive the props needed in the component. Then when the shape of the page data changes it automatically changes in the component props types as well.
All these complaints about Pages and you still haven't upgraded T3 stack to App Router.😂
Great content as always. What do you think about Qwik btw?
Is it time for a new full stack tutorial?
What's the extension called that you get actually readable Error Messages on hover?
Svelte has the blueprint. You get type safety with the language server without having to manually import types everywhere. Smart solution
I hate typescript with react-hook-form resolvers
Love it when js devs talk about type-safety, it's hilarious
Dynamic languages are far more useful than static languages, in the right hands.
If whe are already getting this level of type safety in app router, why should we use tRPC with it? I know that the T3 repo is still using it on the app router version
I still wish next would provide types for pages (including error, not-found etc)
I shouldn't have to go to the docs to know what props an error page receive.
Just give me ErrorPageProps
Thanks a lot for the video, I have a question: so assuming I want to show user's post but a user can add a post, in that cache if I cache the initial response I will always show the same posts. What would be an ideal solution? This example is simple because I could have an server component that just get the first posts where they are needed without caching but let's assume I can't following your example
it is always fun to say "type safety" in a interpreted language – still love typescript!
Oh we all know angularjs is still king