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 • Edited 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

arindam_1729 profile image

Top 5 Open Source Projects You Must Explore Before 2025

Arindam Majumder -

rigalpatel001 profile image

Mastering Advanced Error Handling in Express.js for Robust Node.js Applications

Rigal Patel -

hasan_py profile image

Learn Playwright Automation | E2E Test | Typescript | Auth, Maps, CRUD, GitHub Actions

Hasan -

leemeganj profile image

Master JavaScript date and time: From Moment.js to Temporal

Megan Lee -