Let's go through the steps to set up a Next.js environment and get started with your project:
Muhammad Tauseef
AI Engineer | Working with Agentic AI, Openai Agents SDK, LangChain & LangGraph | CrewAI | Developer | Next.js & TypeScript Enthusiast | SEO & Content Writer | Managing Ads on Facebook, and TikTok"
1. Node.js and npm: Firstly, install Node.js and npm for Next.js. You can download and install Node.js from the official website: Node.js
2. Create Next.js App: Open your terminal or command prompt and run the following command:
npx create-next-app my-next-app
Here, my-next-app is the name of your project. You can customize it according to your project.
3. Move to Project Directory: After creating the app, navigate to the project directory:
cd my-next-app
4. Run the Development Server: Now, start the development server:
npm run dev
This command will run your Next.js application and
provide you with the URL for the local development server (usually https://localhost:3000).
5. Open in Browser: Type https://localhost:3000 in the URL bar of your browser and press Enter. You should see the default Next.js starter page.
6. Create a New Page: Creating a new page in Next.js is simple. Create a new file in the pages directory, for example, about.js. You can access this page at the /about URL.
7. Navigation without Refresh: Next.js provides automatic client-side navigation. Use the <Link> component to navigate between pages without refreshing. Example:
import Link from 'next/link';
function HomePage() {
return (
<div>
<h1>Home Page</h1>
<Link href="/about">
<a>About Page</a>
</Link>
</div>
);
}
export default HomePage;
Here, the href attribute inside the <Link> component specifies the path of the destination page.
I hope these steps help you set up your Next.js environment. Happy coding!