SalmanIyad

Posted on Oct 18

Introduction to Next.js: Building Your First Application

#nextjs #webdev #fullstack #javascript

Next.js is a popular React framework that enables developers to create fast, server-rendered applications. It provides powerful features out of the box, such as static site generation (SSG), server-side rendering (SSR), and API routes. In this guide, we'll walk through the process of building your first Next.js application, focusing on key concepts and practical examples.

1. Setting Up Your Next.js Project

To get started with Next.js, you need to have Node.js installed on your machine. Once you have Node.js set up, you can create a new Next.js application using the following command:

npx create-next-app my-next-app

This command creates a new directory called my-next-app with all the necessary files and dependencies to start a Next.js application.

2. Navigating the Project Structure

After creating your project, navigate to the project directory:

cd my-next-app

Inside the my-next-app directory, you’ll find a structure similar to this:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

The pages directory is where you will create your application's pages, while public is for static assets.

3. Creating Your First Page

Next.js uses a file-based routing system. To create a new page, simply add a new JavaScript file inside the pages directory. For instance, create a file named about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

In this example, we created a simple About page and used the Link component to navigate back to the home page.

4. Modifying the Home Page

Open the index.js file in the pages directory. This file represents the home page of your application. You can modify it as follows:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

Here, we added some simple styling and a link to the About page.

5. Adding Styles to Your Application

Next.js supports CSS modules out of the box. To style your components, you can create a CSS module in the styles directory. For example, create a file named Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Next, import this CSS module into your index.js page as shown in the previous section.

6. Fetching Data with Next.js

Next.js makes it easy to fetch data using getStaticProps for static site generation or getServerSideProps for server-side rendering. For example, to fetch data on the home page, you can modify index.js like this:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

In this code, we fetch a list of posts from a public API and display them on the home page.

7. Creating API Routes

Next.js allows you to create API routes in the pages/api directory. These routes can be used to build your backend functionality. For example, create a file named hello.js in the pages/api directory:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

You can access this API route by navigating to http://localhost:3000/api/hello.

8. Deploying Your Next.js Application

Once your application is ready, you can deploy it easily. Vercel is the recommended hosting platform for Next.js applications. You can deploy your app by following these steps:

Create a Vercel account if you don't have one.
Install the Vercel CLI globally:
```
npm install -g vercel
```
Run the following command in your project directory:
```
vercel
```
Follow the prompts to deploy your application.

9. Adding Dynamic Routing

Next.js supports dynamic routing using brackets. For example, if you want to create a dynamic blog post page, you can create a file named [id].js in the pages/posts directory:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

You can now access a specific post by navigating to /posts/1, /posts/2, etc.

10. Implementing Global Styles

If you want to apply global styles to your application, you can do so by creating a file named _app.js in the pages directory:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Next, create a globals.css file in the styles directory and add your global styles:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. Using Environment Variables

Next.js supports environment variables to store sensitive information. You can create a .env.local file in the root of your project and add your variables:

API_URL=https://example.com/api

You can then access this variable in your application using process.env:

// Example usage in a component
const apiUrl = process.env.API_URL;

Congratulations on building your first Next.js application! Throughout this journey, you have learned how to set up your project, create dynamic pages, fetch data seamlessly, implement robust routing, and deploy your application with ease.

Next.js is more than just a framework; it's a powerful tool that can significantly enhance your web development experience. Its built-in features, like static site generation (SSG) and server-side rendering (SSR), enable you to create fast, user-friendly applications that are optimized for performance and SEO.

Next Steps in Your Next.js Journey

Now that you’ve successfully built your first Next.js application, it’s time to take your skills to the next level. In this upcoming post series, we’ll delve deeper into some of the more advanced features of Next.js that can enhance your applications and streamline your development process.

Middleware is a powerful feature that allows you to extend the functionality of your application by adding custom logic before a request is completed. This means you can manipulate the request and response objects, authenticate users, or even manage redirects seamlessly.

Next, we’ll explore Static Site Generation (SSG). This technique pre-renders pages at build time, allowing for fast loading speeds and improved SEO performance. By understanding how to leverage SSG, you can create applications that are not only dynamic but also incredibly efficient.

Finally, we’ll cover API Routes, a feature that allows you to build serverless functions directly within your Next.js application. This means you can handle requests and responses without needing a separate server, making it easier to develop full-stack applications with less overhead.

Follow me as we embark on this exciting journey into the advanced capabilities of Next.js. With these tools at your disposal, you’ll be able to build robust, high-performance applications that truly stand out. Stay tuned for our next post!

You can read this post also on: