DEV Community

Cover image for Day 11 of #100DaysOfCode: The basis of Next.js - Pages, Link, and Meta
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Updated on

Day 11 of #100DaysOfCode: The basis of Next.js - Pages, Link, and Meta

#100daysofcode #nextjs #react #javascript

Introduction

It's easy to use Next.js to write a React application. There are a few basic feature for Next.js.

  • Create Next.js App
  • Pages
  • Link
  • Fetching data
  • Meta in pages

Create Next.js App

1.Installation

npm init
npm install --save react react-dom next
mkdir pages
Enter fullscreen mode Exit fullscreen mode

2.Edit package.json

"scripts": {
    "dev":"next",
    "build":"next build",
    "start":"next start"
}
Enter fullscreen mode Exit fullscreen mode

3.Create pages/index.js

const Index = () => (<h1>hello</h1>)
export default Index;
Enter fullscreen mode Exit fullscreen mode

4.run

npm run dev
Enter fullscreen mode Exit fullscreen mode

5.Open browser and visit http://localhost:3000

Setting up for TypeScript

1.Create tsconfig.json

touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode

2.run

npm run dev
Enter fullscreen mode Exit fullscreen mode

Pages

In Next.js, a page is a React Component exported from a .js, jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.
Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about.
source: https://nextjs.org/docs/basic-features/pages

  • Create about.js 
function About() {
  return <div>About</div>
}
export default About
Enter fullscreen mode Exit fullscreen mode

Link 

import Link from 'next/link'
const Index = () => (
    <div>
        <h1>hello</h1>
        <link href='/about'>
            <a> about </a>
        </link>
    <div>
)
export default Index;
Enter fullscreen mode Exit fullscreen mode

Fetching data

1.Use getInitialProps to fetch data then pass data from props
2.Use next/router to rerender the page to call getInitialProps again

...
import fetch from "isomorphic-fetch";
import {useState} from 'react';
import Router from 'next/router'

const Index = ({news}) => {
    const [value, setValue] = useState({
        text1:'whatever',
        text2:'whatever'
    })
    const {text1, text2} = value;

    const handleChange = name => e => {
      setValue({...value, [name]: e.target.value})
    }

    const handleSubmit = e => {
      e.preventDefault();
      Router.push(`/news?searchTerm=${text1}`)
    }

    const searchForm = () => (
        <form onSubmit = {handleSubmit}>
            <input 
              type = "text" 
              value={text1}
              onChange = {handleChange('text1')}/>
            <button></button>
            <input 
              type = "text" 
              value={text2}
              onChange = {handleTextChange('text2')}/>
            <button></button>
        </form>
    )

    return (
      {searchForm()}
    )
}

Index.getInitialProps = async ({query}) => {
  let news;
  try {
    const res = await fetch(`.../search?query=${query.searchTerm}`);
    news = await res.json();
  } catch (err) {
    news = [];
  }

  return {
      news
  }
}
export default Index;
Enter fullscreen mode Exit fullscreen mode

Shallow routing

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps. To enable shallow routing, set the shallow option to true. Consider the following
source:https://nextjs.org/docs/routing/shallow-routing

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page
Enter fullscreen mode Exit fullscreen mode

Meta in pages

  • Head  
import Head from 'next/head'
...
<Head>
    <title></title>
    <meta name="des" content="..."/>
    <meta name="keywords" content="seo"/>
    <meta name="author" content="..."/>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</Head>
Enter fullscreen mode Exit fullscreen mode
  • Document 
import Document, {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document {     
    render() {         
        return (             
            <Html>                 
                <Head>      
                    <title></title>
                    <meta name="des" content="..."/>
                    <meta name="keywords" content="seo"/>
                    <meta name="author" content="..."/>      
                </Head>                 
                <body>                     
                    <Main />                     
                    <NextScript />                 
                </body>             
             </Html>         
         )     
      } 
}
export default MyDocument
Enter fullscreen mode Exit fullscreen mode

Articles

There are some of my articles. Feel free to check if you like!

Top comments (0)

Read next

sh20raj profile image

Fix code . command not working | Visual Studio Code

Sh Raj -

windui profile image

File Input Components just Released! 🎉

Wind UI -

shreyvijayvargiya profile image

What is an Abstract Syntax Tree in Programming?

shrey vijayvargiya -

palo profile image

jComponent — Total.js

Pavol -