使用 nextjs 在同一页面上链接页面

Question

Hello everyone I need help regarding linking of pages in nextjs. actually I know how to link but what i want is following: I have my home page having course team contact links in navbar so when I click course then course page gets open with url "localhost:3000/course" and in that course page I have courses . I want that by clicking on any course in course page it should get open and the url should be "localhost:3000/course/course_1".

what should I do ?

This is header component:

  const Header = () => (
   <div>
   <nav className="navbar navbar-expand-lg navbar-dark" >
    <Logo />
    <button className="navbar-toggler" type="button" data-target="#navigation">
        <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse">
        <ul className="navbar-nav">
            <li>
                <a href="/" className="nav-link" >Home</a>
            </li>
            <li>
                <a href="/team" className="nav-link" >Team</a>
            </li>

            <li>
               <a href="/courses" className="nav-link" >Course</a>
            </li>    

            <li >
               <a href="/contact" className="nav-link" >Contact</a>
            </li>
        </ul>
        <form className="form-inline my-2 my-lg-0">
            <div className="d-flex justify-content-center h-100">
                <div className="searchbar">
                    <input className="search_input text-center" type="text" name="" placeholder="Search..." />
                    <a href="#" className="search_icon"><i className="fas fa-search"></i></a>
                </div>
            </div>
        </form>
    </div>
</nav>

This is the course :

  const Course = () => (
  <div>
    <div className="col-xs-12 col-sm-4">
     <div className="card">

        <a className="img-card img-part-2" href="#">
          <img src="/static/course1-img.jpg" />
        </a>
        <div className="teacher-img">
          <div className="ava">
             <img alt="Admin bar avatar" src="http://ivy-school.thimpress.com/demo-3/wp-content/uploads/learn-press-profile/5/2448c53ace919662a2b977d2be3a47c5.jpg" className="avatar avatar-68 photo" height="68" width="68" />
          </div>
        </div>
        <div className="card-content">
           <p className="card-para">Charlie Brown </p>
           <h4 className="card-title">
             <a href="/Pyhton">
                Learn Python – Interactive <br/> Python
             </a>
           </h4>
           <div className="info-course">
               <span className="icon1&-txt">
                 <i className="fas fa-user"></i>
                  &nbsp;&nbsp;3549
               </span>

               <span className="icon2&-txt">
                 <i className="fas fa-tags"></i>
                 &nbsp;&nbsp;education
               </span>

               <span className="icon3&-txt">
                  <i className="fas fa-star"></i>
                  &nbsp;&nbsp;0
               </span>
           </div>
        </div>
     </div>
  </div>

Answer 1

You can try like this:

server.js

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('/course', (req, res) => {
    return app.render(req, res, '/courses')
  })

  server.get('/course/:id', (req, res) => {
    return app.render(req, res, '/course', { id: req.params.id })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

course.js

import React, { Component } from 'react'

export default class extends Component {
  static getInitialProps ({ query: { id } }) {
    return { courseId: id }
  }

  render () {
    return (
      <div>
        <h1>Course {this.props.courseId}</h1>
      </div>
    )
  }
}

courses.js import React, { Component } from 'react'

export default class extends Component {
  render () {
    return (
      <div>
        <a href="/course/python">
            Learn Python – Interactive <br/> Python
        </a>
        <a href="/course/javascript">
            Learn Javascript – Interactive <br/> Javascript
        </a>
      </div>
    )
  }
}