Create a Next.js project: If you haven’t already set up a Next.js project, you can do so by running the following command in your terminal:
npx create-next-app my-next-app
Bash- Replace
my-next-app
with the name you want to give your project. - Navigate to your project directory:
cd my-next-app
BashCreate pages: Next.js automatically sets up routing based on the files in the pages
directory. Each file in this directory becomes a route in your application. Create some pages inside the pages
directory. For example:
pages/
├── index.js
├── about.js
└── contact.js
Bash- Each of these files represents a page in your application.
- Linking between pages: To create links between pages, you’ll use Next.js’s
Link
component. Import it at the top of your file:
import Link from 'next/link';
BashUse the Link
component to create links: Inside your components, you can use the Link
component to create links between pages. For example, in your index.js
file, you might have:
import Link from 'next/link';
function HomePage() {
return (
<div>
<h1>Home Page</h1>
<Link href="/about">
<a>About</a>
</Link>
<Link href="/contact">
<a>Contact</a>
</Link>
</div>
);
}
export default HomePage;
BashRun your Next.js application: Start your Next.js application by running:
npm run dev
Bash