Getting Started with Next.js

9 Min Read
12 Views

Start your Next.js journey today! Explore installation, project setup, and the key features of this versatile React framework.

Getting-Started-with-NextJS
Table of Contents

What is Next.js?

Next.js is a framework built on top of React that simplifies the process of creating web applications. It offers several advantages over using React alone, including:

1. Performance Boost

  • Server-side Rendering (SSR)
    With SSR, Next.js pre-renders pages on the server, sending fully formed HTML to the browser. This translates to faster initial page loads, especially for content-heavy pages requiring complex data fetching.
  • Static Site Generation (SSG)
    Next.js allows pre-generating static HTML content at build time. This is ideal for content that doesn’t change frequently, resulting in blazing-fast load times and improved SEO, as search engines can easily crawl and index static content.

2. Developer-Friendly Features

  • File-based Routing
    Next.js employs a convenient file-based routing system. Each JavaScript file within the pages directory maps to a specific route in your application. This simplifies the process of defining routes and URL structures.
  • Automatic Code-Splitting
    Next.js automatically splits your codebase into smaller bundles. This reduces the initial payload sent to the browser, leading to faster initial page loads.
  • Built-in Image Optimization
    Next.js offers built-in functionalities for optimizing images, ensuring faster loading times and a smoother user experience.

Overall, Next.js offers a powerful and efficient way to build modern web applications using React.

Example to Create a Page in Next.js

import React from 'react';
import Link from 'next/link';

const HomePage = () => (
    <div>
        <h1>Welcome to Next.js!</h1>
        <Link href="/about"><a>About Us</a></Link>
    </div>
);

export default HomePage;

Explanation

  • Line 1: This line imports the React library, essential for building user interfaces with React components.
  • Line 2: Imports the Link component from the next/link module, which handles navigation within your Next.js application.
  • Line 4: This line defines a functional React component named HomePage. The arrow function syntax is used for creating the component.
  • Line 5-8: JSX code defines the structure of what will be rendered to the browser:
    • Line 6: An (<h1>) header with the welcoming message “Welcome to Next.js!”.
    • Line 7: The Link component creates a link on the page.
      • href=”/about”: Defines the destination of the link. In this case, it will navigate to the "/about" page of the Next.js app.
      • <a>About Us</a> The clickable text within the link, displayed as "About Us".
  • Line 11: This line makes the HomePage component available for import and use in other parts of your Next.js project.

This example illustrates the simplicity and ease of creating web pages with Next.js. It shows how straightforward it is to use the Link component to set up navigation between different parts of a Next.js application. With just a few lines of code, you can start building a multi-page web application, leveraging the benefits of Next.js to deliver a fast and user-friendly experience.

From React to Next.js: Key Differences

React is a powerful library for building user interfaces, but Next.js takes things further. While React focuses on component-based UI development, Next.js acts as a framework built on top of React, offering a more comprehensive set of features and functionalities. Here’s a breakdown of the key differences between React and Next.js:

  • Rendering Approach
    • React: Primarily focuses on client-side rendering (CSR), where the browser dynamically generates the UI.
    • Next.js: Offers flexibility with server-side rendering (SSR), static site generation (SSG), and client-side rendering options to boost performance and SEO.
  • Routing
    • React: Requires external libraries (like React Router) for routing and navigation.
    • Next.js: Provides a built-in file-based routing system, simplifying the creation of pages and URL structures.
  • Data Fetching
    • React: Typically relies on methods like useEffect or external libraries (e.g., Axios) for fetching data.
    • Next.js: Offers specialized functions like getStaticProps and getServerSideProps to fetch data at build time (SSG) or on each request (SSR), streamlining the data fetching process and improving performance.
  • Developer Experience
    • React: Offers flexibility for custom structuring but requires more manual configurations.
    • Next.js: Provides a more opinionated framework with pre-built features like code splitting, image optimization, and API routes, reducing boilerplate code and streamlining development.

React Example

Here’s a simple example demonstrating the core concept of a component and how it would be structured in both React and Next.js:

Project Setup

Use create-react-app to set up your project:

npx create-react-app my-react-app
cd my-react-app

Component Creation (src/App.js)

import React from 'react';

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

Rendering (src/index.js)

In a typical React setup, you’d also need an index.js file that renders this App component into the DOM:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Next.js Example

Next.js simplifies the process by handling the boilerplate for you. Here, you don’t need to call a render method explicitly. Instead, you create a file for your page, and Next.js renders it.

Project Setup

Use create-next-app to set up your project:

npx create-next-app my-next-app
cd my-next-app

Component Creation (pages/index.js)

Create a file named pages/index.js:

function HomePage() {
  return <h1>Hello, Next.js!</h1>;
}

export default HomePage;

In Next.js, any React component inside the pages directory becomes a route automatically. The index.js file corresponds to the root route (/). When you run your Next.js app, navigating to the root of your site will render this component.

Running the Examples

  • React: npm start or yarn start
  • Next.js: npm run dev or yarn dev

Both examples display a simple message but show the different approaches between React and Next.js, especially regarding project setup and page rendering.

Key Differences

  • Routing
    Next.js provides file-based routing, whereas React does not provide routing out-of-the-box and might require libraries like react-router.
  • Rendering
    In React, you manually mount your app to the DOM using ReactDOM. Next.js automatically handles the rendering of components based on the file system.
  • Boilerplate
    Next.js requires less boilerplate to start a project, as it has its own structure and setup conventions.

While React provides a solid foundation for building UI components, Next.js extends this functionality with server-side rendering, built-in routing, and streamlined data fetching, making it a compelling choice for developing modern, performant, and SEO-friendly web applications.

Next.js Installation

Next.js boasts a streamlined installation process, making it easy to jumpstart your development journey. Here’s a step-by-step walkthrough to get you up and running with Next.js:

1. Node.js and npm (or yarn)

Ensure you have Node.js and its package manager (npm or yarn) installed on your system. These tools are essential for running Next.js projects. You can download and install them from the official Node.js website (https://nodejs.org/en).

2. Create a Next.js App

Open your terminal and navigate to your desired project directory. Use the following command to create a new Next.js application:

npx create-next-app my-next-app

This line runs the command to create a new Next.js application. npx is a package runner tool that comes with npm 5.2+ and higher. create-next-app is the starter kit for a Next.js project, and my-next-app is the name of the new application directory that will be created. This command downloads all the necessary files and dependencies to start a new Next.js project.

3. Navigate and Run the Development Server

Navigate into the newly created project directory using the cd command:

cd my-next-app

After creating the project, this command changes the directory to your newly created Next.js application folder, my-next-app. It’s essential to be inside the project directory to run Next.js commands.

Start the development server using the following command:

npm run dev

This line starts the development server for your Next.js application. This command is crucial for development as it provides features like hot reloading, which automatically refreshes your project in the browser as you make changes to the code.

4.  Open in Browser

Visit http://localhost:3000 in your web browser. You should see the default Next.js welcome page.

Example (package.json – after running npm run dev)

{
  "name": "my-next-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Explanation

  • Line 1-3: Defines project name and version information.
  • Line 5: Script named "dev" is set to run "next dev" command, which starts the development server.
  • Lines 6-8: Additional scripts for building and starting the production version of the application, along with test execution.
  • Line 10-12: Declares dependencies required by the project, including React and React DOM libraries.

This brief code snippet showcases a portion of the package.json file automatically generated after running npm run dev. It includes essential scripts and dependencies for development with Next.js.

Next.js Folder Structure

Project structure created by the npx create-next-app my-next-app command, along with explanations for the key files and folders:

Project Structure

my-next-app/
├── node_modules/    
├── package.json
├── public/
│   ├── favicon.ico  
│   └── vercel.svg
├── pages/
│   ├── index.js 
│   ├── _app.js
├── styles/
│   ├── globals.css  
│   └── Home.module.css 
├── .gitignore
├── README.md

Explanation

  • node_modules/: This folder contains all the installed Node.js dependencies your project requires.
  • package.json: A core project file containing information about your project, including its name, version, scripts, and dependencies.
  • public/: A directory for static assets like images, icons, and fonts.
    • favicon.ico: Site icon
    • vercel.svg: Example for deployment with Vercel (if you use this platform)
  • pages/: This is the heart of routing in your Next.js application. Each JavaScript (.js) file inside this directory becomes a page accessible through the browser
    • index.js: The default homepage of your application (i.e., http://localhost:3000/)
    • _app.js: An optional file to define a top-level layout or component shared across all pages.
  • styles/: Place your CSS files or CSS modules here.
    • globals.css: For global styles that apply to the entire application.
    • Home.module.css: An example of component-specific styling using CSS modules.
  • .gitignore: A file specifying files and patterns to exclude from version control.
  • README.md: A placeholder for project documentation.

Remember:This is a basic starting structure. As your Next.js application grows, you can add more folders, pages, components, and functionality to organize your project effectively.

Also On CodeTidBits