Next.js is an open-source framework designed to work with React. It is used to build landing pages, SEO-friendly websites, eCommerce stores, and all kinds of web applications that need fast, high-performance load times. On the other hand, TypeScript is a programming language built on JavaScript, which Next.js supports. These two combined provide a better experience both for the user and for the developer.
Next.js and TypeScript are primarily classified as full-stack frameworks and templating languages and extensions tools, respectively, but let’s take a look at what and how both are applied and how they can work together, including examples of its application.
Next.js is an open-source framework created by Vercel. It claims to be the Web's Software Development Kit with all the tools needed "to make the Web. Faster" (sic). Learn about Next.js features with React and its applications here.
Next.js enables search engines to easily optimize React apps with zero configuration. A traditional React app is rendered on the client-side where the browser starts with a shell of an HTML page lacking any rendered content. From there, the browser fetches the JavaScript file containing the React code to render content to the page and make it interactive. However, there are two major drawbacks with client-side rendering:
1. The content is not reliably indexed by all search engines or read by social media link bots;2. It can take longer to reach the first contentful paint when a user first lands on the web page.
Next.js is a framework that allows you to build a React app but render the content in advance on the server so the first thing a user or search bot sees is the fully rendered HTML. After receiving this initial page, client-side rendering takes over and it works just like a traditional React app. It’s the best of both worlds: fully rendered content for bots, and highly interactive content for users.
The real magic comes into play when we talk about data fetching because Next.js can perform multiple server rendering strategies from a single project. Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently. Static generation or pre-rendering allows you to render your pages at build time. See the example below.
undefined
It is possible to see in the previous code snippet an example of Client-side data fetching using the undefined hook of React.
First, we initialised constants to check if the fetching is still pending and to save the data resulting from the fetching process. Then, we call the undefined hook with 2 different arguments:
TypeScript is a programming language that is developed and maintained by Microsoft, and it is a strict superset of JavaScript. It supports static and dynamic typing, and further provides inheritance features, classes, visibility scopes, namespaces, interfaces, unions, and other modern features. TS was designed to handle larger projects as it’s easier to refactor code. Learn more about its features with an in-depth comparison with JavaScript.
There are reasons galore why a JavaScrip developer considers using TypeScript:
Here’s a step-by-step guide to install TypeScript in a Next.js app:
1. Create base project - command: undefined.Create project with a base template.
2. Add undefined into the root of the project to active TypeScript.
3. Structure the project in the form.
undefined
4. Create TypeScript types in Next.js
You can create types for anything in your application, including props types, API responses, arguments for functions, and so on.
We first create a type for our undefined:
undefined
5. Create components in Next.js
Now that we have our undefined type, we can create the undefined component.
undefined
As you can see, we start by importing the previous type we created, and also creating another one called undefined, which will mirror the props received as parameters by the component.
This component is responsible for displaying the undefined object. This component receives the undefined object, a undefined function, and a undefined function as props. Notice that this argument has to match the props type in order to make Typescript happy.
Now let's create our undefined component, responsible for adding undefined in our app.
undefined
Our component accepts the undefined as a parameter. It handles the submission of a new undefined. If the value is not empty, then we call the undefined function on that todo text and then set the value of the form to empty again. This component returns a form that accepts todos and has a submit button, which by clicking the button, we add the todo in the todo list.
6. Create our page in order to use our react components.We will start by importing the components and types we created earlier.
After importing the components and types, we imported undefined, which is provided by Next.js allowing us to set the type on the method getStaticProps.
After that we initialized our undefined using the undefined hook, passing as an argument our initial todos provided by the undefined.
Finally, we declared our main fuctions that implement our logic:
In the end, we return a list of our todos, using our components.
Versatile and data-driven Growth Marketer with in-depth business knowledge, updated with latest developments in the Digital Marketing landscape.
A young and passionate developer who is on a quest to make a difference in how people go about their daily lives.
People who read this post, also found these interesting:
.webp)
