Afreen KhalfeNextJs Tutorial: Getting Started with ReactJS Framework
ReactJS is an open-source JavaScript library that is widely used for building web applications. It was developed by Facebook and is now used by many large companies. React allows developers to build reusable UI components and helps create a more modular and maintainable codebase.
One of the popular frameworks that build on top of React is Next.js. In this tutorial, we will explore how to get started with Next.js and build a simple React application.
Getting Started with Next.js
Next.js is a popular framework for building server-rendered React applications. It offers many features that make building React applications easier, such as automatic code splitting, server-side rendering, and static site generation. It also provides a simple and intuitive API that makes it easy to use.
To get started with Next.js, you’ll need to have Node.js installed on your machine. Once you have Node.js installed, you can create a new Next.js project by running the following command in your terminal:
npx create-next-app my-app
This command will create a new Next.js project with all the necessary files and dependencies. Once the project has been created, you can navigate to the project directory and start the development server by running the following command:
cd my-app
npm run dev
This command will start the development server at http://localhost:3000/. You should see a basic Next.js application running in your browser.
Creating a React Component
In Next.js, you can create a new React component by creating a new file in the page’s directory. Any file that you create in the pages directory will automatically become a new page in your application. Let’s create a new file called index.js in the pages directory and add the following code:
import React from ‘react’;
const IndexPage = () => {
return (
<div>
<h1>Hello World!</h1>
</div>
);
};
Export default IndexPage;
This code defines a new React component called IndexPage that renders a simple h1 tag with the text “Hello World!”.
Routing
tThe Next.js provides a simple and intuitive way to handle routing in your application. You can create a new page by creating a new file in the pages directory, and Next.js will automatically handle the routing for you.
For example, if you create a new file called about.js in the pages directory, you can access that page in your application by visiting http://localhost:3000/about.
Let’s create a new file called about.js in the pages directory and add the following code:
import React from ‘react’;
const AboutPage = () => {
return (
<div>
<h1>About Us</h1>
<p>We are a small company based in San Francisco.</p>
</div>
);
};
export default AboutPage;
This code defines a new React component called AboutPage that renders some simple text.
Linking Pages
Next.js provides a Link component that allows you to easily link to other pages in your application. The Link component will automatically handle client-side routing and prevent the page from reloading.
Let’s add a link to the AboutPage that we created earlier. Open the index.js file in the pages directory and update the code to the following:
import React from ‘react’;
import Link from ‘next/link’;
const IndexPage = () => {
return (
<div>
<h1>Hello World!</h1>
<Link href=”/about”>
<a>About Us</a>
</Link>
</div>
This code imports the Link component from the next/link module and uses it to create a link to the About page. When the link is clicked, the client-side router will automatically navigate to the About page without reloading the entire page.
Styling Components
Next.js allows you to style your components using a variety of methods. One common method is to use CSS modules. CSS modules allow you to define styles for a specific component and prevent them from leaking into other parts of your application.
To use CSS modules in Next.js, you’ll need to create a new file with the .module.css extension. Let’s create a new file called styles.module.css in the pages directory and add the following code:
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 16px;
}
.title {
font-size: 36px;
margin-bottom: 16px;
}
.subtitle {
font-size: 24px;
margin-bottom: 16px;
}
This code defines some simple styles for our components. Now we can use these styles in our React components. Let’s update the IndexPage component to use these styles:
import React from ‘react’;
import Link from ‘next/link’;
import styles from ‘./styles.module.css’;
const IndexPage = () => {
return (
<div className={styles.container}>
<h1 className={styles.title}>Hello World!</h1>
<p className={styles.subtitle}>Welcome to my Next.js app!</p>
<Link href=”/about”>
<a>About Us</a>
</Link>
</div>
);
};
export default IndexPage;
This code imports the styles from the styles.module.css file and applies them to the appropriate elements in the IndexPage component.
Conclusion
In this tutorial, we learned how to get started with Next.js and build a simple React application. We covered how to create new pages, handle routing, link to other pages, and style our components using CSS modules. Next.js provides a powerful and intuitive API that makes building server-rendered React applications easier than ever. With Next.js, you can build scalable and maintainable web applications that are optimized for performance and SEO.
Add comment