how to find the first element with selector following an element

[justforuse]

Take cypress.io as an example, I want to get the first div that following the h1 element.

and I wrote this file:

describe('Cypress', () => {
  it('next with selecor', () => {
    cy.visit('https://www.cypress.io/')
    cy.get('h1').next('div').find('button')
  })
})

seems next not work as I expected. it give me an error:

If I add another .next(), it works as expected:
cy.get('h1').next().next('div').find('button')

I just wonder is there an api can deal with this situation? because we may not know the number of elements between div and h1.

thanks.