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.
It is possible to see in the previous code snippet an example of Client-side data fetching using the useEffect 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 useEffect 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: npx create-next-app next-app-example.
Create project with a base template.
2. Add tsconfig.json into the root of the project to active TypeScript.
3. Structure the project in the form.
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 todos:
5. Create components in Next.js
Now that we have our ITODO type, we can create the Todo.tsx component.
As you can see, we start by importing the previous type we created, and also creating another one called Props, which will mirror the props received as parameters by the component.
This component is responsible for displaying the ITodo object. This component receives the ITodo object, a markTodo function, and a removeTodo function as props. Notice that this argument has to match the props type in order to make Typescript happy.
Now let's create our FormTodo.tsx component, responsible for adding Todos in our app.
Our component accepts the addTodo as a parameter. It handles the submission of a new Todo. If the value is not empty, then we call the addTodo 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 InferGetStaticPropsType, which is provided by Next.js allowing us to set the type on the method getStaticProps.
After that we initialized our todoList using the useState hook, passing as an argument our initial todos provided by the getStaticProps.
Finally, we declared our main fuctions that implement our logic:
addTodo - allows to add a todo in our listremoveTodo - allows to remove a todo in our listmarkTodo - allows to set a todo as done in our list
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:
.png)
