Getting Started with Next.js: A Hello World Application | CodeForGeek (2024)

Next.js is a modern React framework for building web apps efficiently and effectively, which is becoming famous nowadays. It fills the gap that React cannot provide and due to its ability to handle the backend code, it becomes the best solution for building full-stack applications.

In our previous tutorial of this exclusive Next.js series, we learned what each file and folder in a Next.js project means. In this, let’s get started with Next.js by creating a simple Hello World application.

Next.js Hello World Application

Below is the detailed step-by-step procedure to create a Hello World application in Next.js.

1. Initializing a New Next.js Project

Make sure that the Node.js version 18.17 or higher is installed on your system:

Getting Started with Next.js: A Hello World Application | CodeForGeek (1)

Open the terminal and run the below command to create a Next.js application:

npx create-next-app@latest

Choose any project name you want – all in lowercase, use hyphens (–) for space, and no whitespace.

For the other parameters let’s go with the default option for now. Just check “Yes” for both TypeScript and App Router to follow along with us.

Getting Started with Next.js: A Hello World Application | CodeForGeek (2)

2. Navigating to the Project Directory

Once the project is set up, you will get the exact project path.

Getting Started with Next.js: A Hello World Application | CodeForGeek (3)

Copy the project path and navigate to it:

Getting Started with Next.js: A Hello World Application | CodeForGeek (4)

3. Testing the Application

Now execute the below command to test the application:

npm run dev

Here we are running the development server which listens on http://localhost:3000/, So open the URL in a browser to see the default Next.js welcome page.

Getting Started with Next.js: A Hello World Application | CodeForGeek (5)

In the upcoming steps, we will create another route “/hello-world”, to create our Hello World page, keeping the default route “/” unchanged.

If you want a detailed explanation of the above step, see Next.js Installation.

4. Opening the Project in a Code Editor

Now, open the project folder inside a code editor to edit the code for making our Hello World page.

If you are using VS code, just type “code .” in the terminal to directly open the project folder in the editor.

5. Understanding the App Directory

You are now seeing a lot of files and folders which we already explained in our previous tutorial. One of the main folders we need here is the app.

Getting Started with Next.js: A Hello World Application | CodeForGeek (6)

In the app, we have two important files: layout.tsx and page.tsx.

Getting Started with Next.js: A Hello World Application | CodeForGeek (7)

Each folder in a Next.js application has its own layout and page. The layout (layout.tsx) is like a wrapper that goes with page (page.tsx).

The app/layout.tsx and app/page.tsx are the layout and page for the home route(“/”) and if we want to create another route, like “/hello-world”, we have to create a folder of that route name inside this main app directory that must have both layout.tsx and page.tsx files. In future, if you need another route you have to do the same.

6. Creating the Hello World Folder

Let’s create our “hello-world” folder inside the app directory with both layout.tsx and page.tsx.

layout.tsx:

import React from 'react';import Head from 'next/head'; const HelloWorldLayout: React.FC = ({ children }) => { return ( <html lang="en"> <Head> <meta charSet="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World Page</title> </Head> <body> {children} </body> </html> );};export default HelloWorldLayout;

The first two lines are importing statements, importing the React library to create React components and the Head component from Next.js to modify the HTML and use meta tags, titles, and other elements present in the head.

After this, the code creates a component named HelloWorldLayout where the React.FC is a TypeScript type. This component uses children as a prop to inject it inside the HTML. This component returns JSX, representing the structure of the HTML document.

All the code inside this is just basic HTML code.

The last line exported the HelloWorldLayout as the default export allowing other files to import this layout component.

page.tsx:

import React from 'react';import HelloWorldLayout from './layout';const HelloWorldPage: React.FC = () => { return ( <HelloWorldLayout> <section> <h2>Hello, World!</h2> <p>This is the HelloWorld page.</p> </section> </HelloWorldLayout> );};export default HelloWorldPage;

Most of the things are the same as above. We are creating a component HelloWorldPage, returning JSX that uses HelloWorldLayout and writes some HTML that HelloWorldLayout uses as children for the component.

Output:

Getting Started with Next.js: A Hello World Application | CodeForGeek (8)

Summary

To create a Hello World application using Next.js all we need to do is create a folder called “hello-world” inside the app directory with layout.tsx and page.tsx files. The layout.tsx is like a container that wraps the page.tsx content. We can create our custom layout in layout.tsx then import it and use it inside page.tsx with the HTML content we want to render. This whole process creates a new “/hello-world” route for our Hello World page.

Reference

https://nextjs.org/docs/getting-started/installation

Getting Started with Next.js: A Hello World Application | CodeForGeek (2024)

FAQs

Is Next.js good for big applications? ›

Definitely. Whether you run a blog, news site, or any content-rich platform, Next. js has you covered. Its render options allow you to choose the best approach for each page, balancing the benefits of static generation (speed and SEO) with dynamic rendering (real-time updates).

Is Next.js easy to learn? ›

Next JS is easy to learn if you have a basic knowledge of React, whereas React JS is easy to learn and use if you have an understanding of JavaScript, HTML, and CSS.

How to initialize Next.js app? ›

Initializing a Next.

js project can be initialized using a Command Line Interface (CLI) known as create-next-app that bootstraps a Next. js project within a directory of your choice. You'll be asked some questions on the project configuration as below, but in this article, we'll use JavaScript for the project.

How to run a Next.js project with Yarn? ›

Setup a Next. js project with PM2, Nginx and Yarn on Ubuntu 18.04
  1. Install Nginx.
  2. Install Yarn.
  3. Install PM2.
  4. Use Git to fetch our Next.js project from Github.
  5. Run our project with PM2 and serve a browsable version with Nginx.
  6. Run PM2 automatically whenever we boot/reboot the machine.

How much does a Next.js developer earn in us? ›

Next Js Salary
Annual SalaryHourly Wage
Top Earners$156,000$75
75th Percentile$132,500$64
Average$121,124$58
25th Percentile$102,500$49

Are Next.js developers in demand? ›

As web technologies advance, the demand for skilled Next. js developers is expected to grow. Their expertise in creating powerful web applications that leverage the latest advancements in AI and other services will be crucial for businesses aiming to stay competitive.

Is Next.js a full stack framework? ›

js provides SSR by default and uses the Node. js runtime environment to run server-side code. It's important to note that while Next. js is considered a full-stack framework, it doesn't cover every aspect of back-end and full-stack development.

Can I learn Next.js without knowing React? ›

NEXT. js is a server-side framework built on top of React. js, so, in order to use NEXT. js, you'll need to become familiar with React.

Is Next.js backend or frontend? ›

Next. js is known for its frontend capabilities. It integrates with Node. js to give developers a strong backend.

How long does it take to build Next.js app? ›

Deployed on Vercel. The project has 7000 static pages. It now takes me around 30-40 minutes to build the site.

How to run a Next.js app locally? ›

Running Your Next. js Build Locally
  1. Inside your project directory, add a new script to your package. json file called "start": "start": "next start" , if it doesn't already exist.
  2. Save the package. json file.
  3. Run the start script using the command npm run start or yarn start.
Jun 4, 2023

Can you run Next.js on Windows? ›

System Requirements: Node.js 18.17 or later. macOS, Windows (including WSL), and Linux are supported.

Why is Yarn better than npm? ›

While NPM fetches packages from the online npm registry for every 'install' command, YARN stores dependencies locally in most cases and fetches packages from a local disk, given that dependency has been installed earlier. This makes YARN considerably faster than NPM when it comes to fetching packages.

How to create a Next.js app in VS Code? ›

Install Next. js and create a project (replacing 'my-next-app' with whatever you'd like to call your app): npx create-next-app@latest my-next-app . Once the package has been installed, change directories into your new app folder, cd my-next-app , then use code . to open your Next. js project in VS Code.

Can I replace Yarn with npm? ›

The developers using yarn will all get exactly the same configuration as each other, and the developers using npm may get slightly different configurations, which is the intended behavior of npm . Later, if you decide that Yarn is not for you, you can just go back to using npm without making any particular changes.

Do big companies use Next JS? ›

Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.

What is Next JS not good for? ›

It's important to note that while Next. js is considered a full-stack framework, it doesn't cover every aspect of back-end and full-stack development. For instance, it doesn't include a database system.

What is Next JS best used for? ›

Next. js is a great choice if you are building a static site or an application that doesn't require complex routing, as it automates many of the build processes and offers built-in support for server-side rendering.

Is Next JS the next big thing? ›

The framework boasts many different benefits from faster performance to improved search engine optimization (SEO). It certainly appears that Next. js will be the next big thing to take the web development world by storm, but timing the switch to a new framework is always a challenging decision.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Gov. Deandrea McKenzie

Last Updated:

Views: 5797

Rating: 4.6 / 5 (46 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Gov. Deandrea McKenzie

Birthday: 2001-01-17

Address: Suite 769 2454 Marsha Coves, Debbieton, MS 95002

Phone: +813077629322

Job: Real-Estate Executive

Hobby: Archery, Metal detecting, Kitesurfing, Genealogy, Kitesurfing, Calligraphy, Roller skating

Introduction: My name is Gov. Deandrea McKenzie, I am a spotless, clean, glamorous, sparkling, adventurous, nice, brainy person who loves writing and wants to share my knowledge and understanding with you.