Introduction:
If you’re new to web development, you’ve probably heard of React, one of the most popular JavaScript libraries. Next.js is a React-based framework that facilitates search engine optimization (SEO), fast loading and building modern web applications. In this guide, we’ll go through step-by-step how to install Next.js and run your first app.
Requirements
Before starting Next.js, there are a few things to install:
1. Node.js and npm
Next.js requires Node.js, which also provides npm (Node Package Manager). You can check if Node.js is installed by running this command:
node -v
If no version is displayed, install the latest version from the Node.js website.
2. Code Editor
Use Visual Studio Code to write code as it is lightweight and provides excellent extensions.
3. Basic JavaScript and React Knowledge
Knowing basic JavaScript and React concepts such as components and state would be beneficial, but even beginners can follow this guide.
3. Setting Up Next.js
Now it’s time to install Next.js!
1. Install Node.js
If you haven’t installed Node.js yet, download and install it from the Node.js website
2. Create a New Next.js Project
Go to terminal and run this command:
npx create-next-app@latest my-next-app
This will create a folder called my-next-app, which you can change to your liking.
3. Navigate into the Project Directory
Go to your directory with the bellow command:
cd my-next-app
4. Start the Development Server
Now, you need to run below command to start your server:
npm run dev
Open http://localhost:3000 in a browser. If the Next.js welcome page appears, you’ve succeeded!
4. Understanding the Project Structure
Your Next.js project contains a few default files and folders:
- pages/: Here you create pages; such as pages/about.js, which would be available at http://localhost:3000/about
- public/: Can hold static files such as images here.
- styles/: is for default CSS files, can add custom styles here.
5. Creating Your First Page
Create a new file hello.js in the pages folder and write the following code:
export default function Hello() {
return <h1>Hello, Next.js!</h1>;
}
Now visit http://localhost:3000/hello. Your first page is ready!
6. Basic Configuration
Next.js comes with a next.config.js file for custom settings, but it’s optional. Most of the time, the default settings are enough to get started. However, if you want to add environment variables, create a file named .env.local in the root of your project folder and add your variables like this:
NEXT_PUBLIC_API_URL=https://api.example.com
You can access these in your code using process.env.NEXT_PUBLIC_API_URL.
7. Styling Your App
You can style your Next.js app in several ways:
1. Global CSS
If you want styles that apply across your entire app, add them to styles/globals.css. Import this file in _app.js to make it available globally.
2. CSS Modules
For component-specific styles, you can use CSS Modules by creating .module.css files and importing them directly into your components. This keeps your styles scoped to just that component.
3. Adding SCSS
If you prefer SCSS, you can add it by running:
npm install sass
Now you can create .scss files and use all the SCSS goodies like variables, nesting, and mixins.
8. Building and Deploying Your App
When you’re ready to take your app live, here’s how you can build and deploy it:
1. Build for Production
Run the following commands to create a production build and start the server:
npm run build
npm start
The build command creates an optimized version of your app, and npm start will serve it. Make sure everything looks good before you deploy.
2. Deploying to Vercel
Vercel, the company behind Next.js, offers free hosting and seamless integration with GitHub. To deploy, push your code to GitHub and link the repo to Vercel. You’ll get a live URL in minutes.
3. Other Platforms
You can also host your Next.js app on Netlify, DigitalOcean, or AWS if you need more control. Each platform has its own setup, but most are easy to follow.
In this guide, we’ve covered the entire process of setting up a Next.js app, from installation to deployment. If you’ve followed along, you should now have a working Next.js app that you can build on and customize.
Next.js has a ton of additional features like API routes, dynamic routing, and image optimization, so I’d encourage you to keep experimenting! The Next.js docs are a great place to dive deeper into the framework.
Happy coding, and enjoy building with Next.js!
