Here is a short tutorial on Next.js:
- Install Next.js and React by running the following command in your terminal:
pythonCopy codenpm install next react react-dom
- Create a new directory for your Next.js project and navigate into it.
perlCopy codemkdir my-next-app && cd my-next-app
- Create a new file named
pages/index.js
and add the following code to create a simple “Hello, World!” page:
javascriptCopy codeimport React from 'react';
function HomePage() {
return <h1>Hello, World!</h1>;
}
export default HomePage;
- Start the Next.js development server by running the following command:
Copy codenpm run dev
- Open your browser and navigate to
http://localhost:3000
to see your “Hello, World!” page. - To add a custom header to your page, create a new component in a separate file, for example,
components/Header.js
. Add the following code to create a header component:
javascriptCopy codeimport React from 'react';
function Header() {
return (
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
);
}
export default Header;
- Import the
Header
component in yourpages/index.js
file and use it in your page:
javascriptCopy codeimport React from 'react';
import Header from '../components/Header';
function HomePage() {
return (
<>
<Header />
<h1>Hello, World!</h1>
</>
);
}
export default HomePage;
This is just a simple example of how to create a Next.js application. You can find more information and tutorials on the Next.js website, including how to add pages, fetch data, and create dynamic routes. With its powerful features and efficient development tools, Next.js is a great choice for building modern, high-performance web applications.