Home >Web Front-end >JS Tutorial >Introduction to Next.js: Building Your First Application
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.
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.
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.
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.
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.
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.
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.
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.
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:
npx create-next-app my-next-app
Run the following command in your project directory:
cd my-next-app
Follow the prompts to deploy your application.
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:
my-next-app/ ├── node_modules/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js ├── public/ ├── styles/ │ ├── Home.module.css ├── package.json └── README.md
You can now access a specific post by navigating to /posts/1, /posts/2, etc.
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/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> ); }
Next, create a globals.css file in the styles directory and add your global styles:
// 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> ); }
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:
/* styles/Home.module.css */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: Arial, sans-serif; }
You can then access this variable in your application using process.env:
// 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> ); }
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.
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:
Find me on:
The above is the detailed content of Introduction to Next.js: Building Your First Application. For more information, please follow other related articles on the PHP Chinese website!