Recently I started interning at a Startup and they are using Next.js, which I have not used before but I have been working and gained some experience with React. React is a base requirement to learn Next.js. You might be able to start right away with Next.js, but for a better understanding starting with React is the right way to go.
Here I wanted to share my first experience and some of the basics I learned.
Next.js a React Framework for Production.
Creating you next.js application:
npx create-next-app name-of-your-app
Starting the server:
npm run dev
In your browser:
http://localhost:3000/
Now you should see a basic webpage.
One of the perks of Next.js is you don't have to use a 3rd party router like in React.js (react-router-dom).
Simply put your pages in your pages folder. The pages are react components.
*Router *
create a file in your pages folder. Page.js
in your Page.js file add the following. Just like you would create a react component:
const page = () => {
return (
<div>
<h1>Page 1</h1>
</div>
)
}
export default page
"Keep your pages lower case and for your future components uppercase"
If you direct your browser to the following:
http://localhost:3000/page
You have your new end point and you are able to see whatever that page contains in this case just a simple Page 1 message.
As simple as that.
Adding title to your page
If you learned React. You would have to add this to your public/index.js file in react, but since we don't have it in Next.js we just simply add it to your index.js in page folder.
(note: in this folder I removed everything except the div)
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title> My site</title>
<meta name='keywords' content='website' />
</Head>
<h1>Welcome to next</h1>
</div>
)
}
Now you have a title to your page. You can repeat that to all your pages and it will dynamically change the title for all your pages.
Ensure you to import
import Head from 'next/head'
Styling your page using style components.
In this step we will create a folder called "components" in the main folder (not within pages) and within that file lets create a Layout file.
Here we will import our css style component.
You might see there are already 2 files lets rename the Home.module.css to Layout.module.css
import styles from '../styles/Layout.module.css'
const Layout = ({ children }) => {
return (
<div className={styles.container}>
<main className={styles.main}>{children}</main>
</div>
)
}
export default Layout
To reference already existing styles we use the styles.name-of-style as seen above.
App.js file
This file will be something like a Navbar in React. Whatever you put in here like header, footer etc. will appear on every page.
Lets import our Layout component to app.js.
import '../styles/globals.css'
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
The "children" in this case will be the content you have added to your pages.(Page 1, Welcome to next, etc.) children will dynamically change that content based on what endpoint you are on.
You can also add other content to your Layout component to, if you add it to this file it will appear on all your pages. Give it a try like adding an h1 with any message. You will see that message on all pages with addition to the page content. In our case we will add a navbar.
As a next step we will create our actual Navbar that is going to reside on top of our page and it will be visible on every page.
create in your styles folder a Navbar.modules.css (modules will need to be added if you just want this CSS to be applied to that specific component.
We will add some CSS to this.
.nav {
height: 60px;
padding: 15px;
background-color: rgb(255, 119, 119);
color: rgb(0, 0, 0);
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav ul li a {
margin: 5px 15px;
font-size: 25px;
}
Create in component folder Navbar.js then add the following.
On top we will import our newly created Navbar.modules.css file for styling purposes. when you import it you can name it whatever name you want it navStyle just make sure you use appropriate naming convention for readability.
We will also import Link just like in react router for guiding through our endpoints.
Ones everything is imported add the ul, li elements and within our li we also add the Link tag for the routing.
import navStyles from '../styles/Navbar.module.css'
import Link from 'next/link'
const Navbar = () => {
return (
<nav className={navStyles.nav}>
<ul>
<li>
<Link href='/'> Home </Link>
</li>
<li>
<Link href='/page'> Page </Link>
</li>
</ul>
</nav>
)
}
export default Navbar
Ones that's done we just have to import this component into our Layout file and add it outside your div. so it will always be the same on every page regardless of the content.
import styles from '../styles/Layout.module.css'
import Navbar from './Navbar'
const Layout = ({ children }) => {
return (
<>
<Navbar></Navbar>
<div className={styles.container}>
<main className={styles.main}>{children}</main>
</div>
</>
)
}
export default Layout
Now you should see your navbar on top and you can navigate between your pages.
This is it you have a Next.js basic Website with a navbar and routing.
Hope you enjoyed it.
If you need, there are several courses on youtube or you can use the Next.js documentation for additional information.
Top comments (0)