In this post, we’re going to explore the Basic Concepts of Next.js. First, let’s recall what Next.js is. Next.js is a React-based framework that makes it easy to build and deploy server-rendered React applications. It provides a set of tools and optimizations that simplify the development process and help you build better, faster, and more scalable applications.
Key Highlights that we are going to learn.
- Routing in Next.js
- Pages and Components in Next.js
- Dynamic Routing and Query Parameters in Next.js
- Static Assets
- Data Fetching in Next.js
If you have just started and wanted to learn how can we setup Next.js you can checkout our previous blog post on this Course : Getting started with next.js or we can refer official documentation on Next.js site.
Routing in Next.js
we’re going to explore the routing system in Next.js and learn how to create and manage routes in our Next.js application.
let’s take a look at how Next.js handles routing by default. In a Next.js application, each file in the pages directory represents a separate route. For example, if we have a file called about.js in the pages directory, our about page will be available at http://localhost:3000/about. This makes it easy to manage and organize our routes in a Next.js application.
we will also learn about dynamic routes letter in this post,
Next, let’s take a look at how we can create custom routes in Next.js. Custom routes allow us to map a custom path to a component, allowing us to create custom URLs for our application. To create a custom route in Next.js, we’ll need to use the Link component and the Router component from the next/router package.
In summary, the routing system in Next.js is simple, flexible, and easy to use. By following the conventions for file names in the pages directory, we can easily create and manage routes in our Next.js application. Additionally, with the ability to create dynamic and custom routes, we have the flexibility to build the exact routing system that we need for our application.
Pages and Components in Next.js
First, let’s take a look at what pages are in Next.js. In Next.js, a page represents a single route in our application. Each page is a component that is responsible for rendering the content for that route. Pages are stored in the pages directory and are automatically mapped to a route based on their file name.
Next, let’s take a look at components in Next.js.
- Components are reusable building blocks that we can use to build our pages.
- Components can be used to build the layout of our pages, as well as to display dynamic content.
- Components can also be used to manage state and handle user interactions.
In Next.js, we can create both functional components and class-based components. Functional components are simple, lightweight components that are defined as JavaScript functions. Class-based components, on the other hand, are more powerful and can be used to manage state, handle lifecycle methods, and more.
Next, let’s take a look at how we can use pages and components together to build our Next.js application. In Next.js, we can use pages to define the structure of our application, while using components to build the individual parts of each page. By using pages and components together, we can build a scalable, maintainable, and modular application.
In summary, pages and components are the building blocks of a Next.js application. By using pages to define the structure of our application and components to build the individual parts, we can build a scalable and modular application.
Dynamic Routing and Query Parameters in Next.js
First, let’s take a look at dynamic routing in Next.js. Dynamic routing is a technique for creating pages that can display different content based on the parameters passed to the route. To create a dynamic route in Next.js, we simply add a placeholder in the file name for the parameter, like this:
pages/post/[id].js
In this example, the [id] placeholder represents the id of the post that we want to display. To access the parameter in our component, we can use the useRouter hook, which gives us access to the Next.js router.
Next, let’s take a look at query parameters in Next.js. Query parameters are parameters that are passed in the URL after the question mark (?). Query parameters are often used to filter or sort data in a dynamic way. To access query parameters in Next.js, we can use the useRouter hook and the query property on the router object.
In Next.js, we can also use the Link component from the next/link package to pass query parameters to our pages. The Link component allows us to pass query parameters in the same way that we would pass them in a URL.
In summary, dynamic routing and query parameters are powerful tools for creating dynamic and interactive pages in our Next.js application. By using dynamic routing, we can display different content based on the parameters passed to the route. And by using query parameters, we can filter or sort data in a dynamic way.
Static Assets in Next.js
First, let’s take a look at where to store our static assets in a Next.js application. In Next.js, we can store our static assets in the public directory. This directory is served directly by the Next.js server, so we can access our static assets using a URL that starts with /.
Next, let’s take a look at how to include images in our Next.js application. To include an image in our Next.js application, we simply need to import the image into our component and then use it in the component’s render method. Here’s an example:
import logo from './logo.png';
function Header() {
return ( <img src={logo} alt="Logo" /> );
}In this example, we import the logo.png image and then use it in our component by passing it to the src prop on an img element.
Next, let’s take a look at how to include fonts in our Next.js application. To include a font in our Next.js application, we need to download the font files and store them in the public directory. Then, we can link to the font in our stylesheet using a URL that starts with /. Here’s an example:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}
Data Fetching in Next.js
First, let’s understand the different ways we can fetch data in Next.js. There are three main ways to fetch data in Next.js:
getStaticProps– This function is used to fetch data at build time and the fetched data will be included in the HTML file generated by Next.js. This means that the data will be available to the user even if they are offline or have a slow network connection.getServerSideProps– This function is used to fetch data on the server-side for each request made to the Next.js application. This is useful for fetching data that needs to be protected or requires access to information not available on the client-side.getInitialProps– This function was the original way to fetch data in Next.js, but it is being deprecated in favor ofgetStaticPropsandgetServerSideProps. It is used to fetch data on either the server or client-side, depending on the context of the request.
Now that we understand the different ways to fetch data in Next.js, let’s look at an example of how to fetch data in a Next.js component. Here’s an example of a component that fetches data using the getInitialProps function:
import axios from 'axios';
export async function getInitialProps() {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const posts = response.data;
return { posts };
}In this example, we use the axios library to fetch data from an API and then return the data as props in the getInitialProps function. The component then receives the data as props and uses it to render a list of posts.
It’s important to note that the getInitialProps function is executed both on the server-side and the client-side, depending on the context of the request. This means that you need to be careful when using it, as some data fetches may not be necessary on the client-side.
In general, you should use getStaticProps when you want to fetch data at build time and getServerSideProps when you need to fetch data on the server-side. These functions are more optimized for their specific use cases and will result in better performance and scalability for your application.
