CODEWITHSUNDEEP
javascriptnext.js
sdfdsfdsfsd
sdfdsfdsfsd

Reputation: 1

Next.js application 404 when using path params

I'm new to web development in general and is trying to learn how to use server side rendering with next.js and react on a lambda. When I run it on a lambda, the code somewhat works. _breed class shows the paramter valye, for example shepard but I get 404 in the console. When I run it locally, I get 404 on the page completely, thus the paramas do not come through at all. This is my structure: 

index.js
server.js
pages/
     index.js
     dogs/
          index.js
          _breed.js

I think these are my relevant files:

server.js

const express = require('express')
const path = require('path')
const next = require('next')
const pathMatch = require('path-match')
const isLocalEnvironment = process.env.NODE_ENV !== 'lambda'
const app = next({ isLocalEnvironment })
const handle = app.getRequestHandler()
const { parse } = require('url')

const server = express()
const route = pathMatch()

server.use(async(req, res, next) => {
  await app.prepare();
  next();
})

server.use('/_next', express.static(path.join(__dirname, '.next')))
server.get('/', (req, res) => app.render(req, res, '/'))
server.get('/dogs', (req, res) => app.render(req, res, '/dogs'))

server.get('/dogs/:breed', (req, res) => {
  const params = route('/dogs/:breed')(parse(req.url).pathname)
  return app.render(req, res, '/dogs/_breed', params)
})


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

module.exports = server

dogs/index.js

import React from 'react'
import Default from '../../layouts/default'
const meta = { title: 'Dogs', description: 'Dogs' }

class DogsPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
    }
    this.fetchData = this.fetchData.bind(this)
  }
  async componentDidMount () {
    await this.fetchData()
  }
  async fetchData () {
    this.setState({
        loading: false
    })
  }
  render () {
    return (
      <Default meta={meta}>
        <div>
          <h1>Please select a dog from the menu bar.</h1>
        </div>
      </Default>
    )
  }
}

export default DogsPage

_breed.js

import React from 'react'
import Default from '../../layouts/default'
const meta = { title: 'Breed', description: 'Specific Breed' }

class BreedPage extends React.Component {
  static getInitialProps ({ query: { breed } }) {
    return { breed }
  }
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
    }
    this.fetchData = this.fetchData.bind(this)
  }
  async componentDidMount () {
    await this.fetchData()
  }
  async fetchData () {
    this.setState({
      breed: this.props.breed,
      loading: false
    })

  }
  render () {
    return (
      <Default meta={meta}>
        <div>
        <h1>This breed is {this.props.breed}!</h1>
        </div>
      </Default>
    )
  }
}

export default BreedPage

If I now start the app and navigate to http://localhost:3000/dogs It works fine.

But if I then go to:

http://localhost:3000/dogs/shepard

I get 404, that the page does not exists.

Am I missing something in my routing in the server?

Upvotes: 0

Views: 1330

Answers (1)

Darryl RN
Darryl RN

Reputation: 8228

return app.render(req, res, '/dogs/_breed', params)

You have to put _breed.js inside dogs directory. Your app couldn't find _breed inside dogs, therefore it redirects to 404.

Hope this help.

Upvotes: 0

Related Questions