Now that your Next.js development environment is set up, it’s time to create your first Next.js application. In this guide, we’ll walk you through the process of building a simple Next.js app from scratch. By the end of this tutorial, you’ll have a working Next.js application and a solid understanding of the basic concepts.
Step 1: Create a New Next.js Project
To create a new Next.js project, use the create-next-app
command-line tool. Open your terminal or command prompt and run the following command:
npx create-next-app my-first-app
Replace my-first-app
with the desired name for your project. The CLI will prompt you to configure the project. You can choose options like TypeScript support, ESLint configuration, and more.
Once the setup is complete, navigate to the project directory:
cd my-first-app
Step 2: Start the Development Server
To view your application in the browser, start the development server using the following command:
npm run dev
This command starts the development server and makes your application available at http://localhost:3000
. Open your browser and navigate to this URL to see your Next.js application in action.
Step 3: Understand the Project Structure
Before making changes, let’s understand the basic structure of a Next.js project:
- pages/: Contains the application pages. Each file in this directory corresponds to a route.
- public/: Stores static assets like images and fonts.
- styles/: Contains CSS files for styling the application.
- next.config.js: Configuration file for Next.js.
- package.json: Lists project dependencies and scripts.
Step 4: Modify the Home Page
The default Next.js application comes with a basic home page. Let’s modify it to display a custom message.
- Open
pages/index.js
and update the content:
export default function Home() {
return (
<div>
<h1>Welcome to My First Next.js App!</h1>
<p>This is my first Next.js application.</p>
</div>
);
}
Save the changes, and the browser will automatically reload to display the updated content.
Step 5: Add a New Page
In Next.js, pages are created by adding files to the pages
directory. Let’s create a new page called about.js
.
- Create a new file
pages/about.js
and add the following content:
export default function About() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our company.</p>
</div>
);
}
- Navigate to
http://localhost:3000/about
to view the new page.
Step 6: Add Styling
Next.js provides built-in support for CSS modules, styled-jsx, and CSS-in-JS libraries. Let’s add some basic styling to the home page using CSS modules.
- Create a new file
styles/Home.module.css
and add the following styles:
.container {
padding: 20px;
text-align: center;
}
.title {
font-size: 2rem;
color: #0070f3;
}
- Update
pages/index.js
to use the CSS module:
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1 className={styles.title}>Welcome to My First Next.js App!</h1>
<p>This is my first Next.js application.</p>
</div>
);
}
Step 7: Run the Application
If the application is not already running, use the following command to serve it:
npm run dev
Your first Next.js application is now live!
Secrets and Hidden Facts
- Hot Reloading: Next.js automatically reloads the application when you save changes, thanks to its built-in development server.
- Custom Document and App: You can customize the
_document.js
and_app.js
files to add global styles, scripts, and more. - Environment Variables: Use environment variables to manage configuration settings for different environments.
Conclusion
Congratulations! You’ve successfully created your first Next.js application. You’ve learned how to set up a project, modify pages, add styling, and run the application. This is just the beginning—Next.js offers a wide range of features to explore as you continue your journey. Keep experimenting and building to master this powerful framework.

No comments: