Wednesday, 17 February 2021

nextjs 1




//nextjs renders all web components visible in html code, easy for web crawler to pick up.

//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