//cmd - initialize new nextjs project
npx create-next-app projectname
//pages/_app.js
import '../styles/globals.css'
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
-----------------------
//componnents/Layout.js
import styles from '../styles/Layout.module.css'
import Nav from './Nav'
import Header from './Header'
const Layout = ({children})=>{
return(
<div>
<Nav></Nav>
<div className={styles.container}>
<main className={styles.main}>
<Header></Header>
{children}
</main>
</div>
</div>
)
}
export default Layout
---------------------------
//components/Header.js
import headerStyles from '../styles/Header.module.css'
const Header = () => {
const x = 2
return (
<div>
<h1 className={headerStyles.title}>
<span>WebDev</span> News
</h1>
{/* <style jsx>
{`
.title{
color: ${x > 3 ? 'red' : 'blue'};
}
`}
</style> */}
<p className={headerStyles.description}>
Keep up to date with the latest web dev news</p>
</div>
)
}
export default Header
------------------------
//components/Nav.js
import navStyles from '../styles/Nav.module.css'
import Link from 'next/link'
const Nav = () =>{
return (
<nav className={navStyles.nav}>
<ul>
<li>
<Link href='/'>Home</Link>
</li>
<li>
<Link href='/about'>About</Link>
</li>
</ul>
</nav>
)
}
export default Nav
------------------------
//pages/index.js
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>WebDev Newz</title>
<meta name='keywors' content='web development'/>
</Head>
<h1>Welcome to Next</h1>
</div>
)
}
--------------------------------
//styles/Nav.module.css
.nav{
height: 50px;
padding: 10px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav ul li a {
margin: 5px 15px;
}
------------------------
//styles/Header.module.css
.title a, .title span {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
reference:
No comments:
Post a Comment