Blog Javascript

Construindo um site com Next.js e React: Tutorial passo a passo

O artigo é um tutorial sobre como construir um site de busca de filmes com Next.js e React, abordando suas principais funcionalidades e personalização de layout.

react

25 mar 2023

Next.js é um framework React que permite a construção de sites e aplicações web com renderização do lado do servidor (SSR) e geração de páginas estáticas.

É uma ferramenta poderosa para a construção de aplicações escaláveis e de alto desempenho, além de oferecer uma experiência de desenvolvimento moderna e intuitiva.

Neste tutorial, vamos construir um site simples usando Next.js e React, passo a passo. Ao final do tutorial, teremos uma aplicação que exibe informações sobre alguns filmes e permite a pesquisa por título.

Passo 1: Preparando o ambiente

Antes de começar a construir o site, é necessário ter o ambiente de desenvolvimento configurado.

Para isso, é necessário ter o Node.js instalado na máquina. Caso não tenha, é possível baixá-lo em https://nodejs.org.

Com o Node.js instalado, é necessário criar um novo projeto Next.js. Para isso, abra o terminal e navegue até o diretório em que deseja criar o projeto.

Em seguida, execute o seguinte comando:

npx create-next-app nome-do-projeto

Substitua "nome-do-projeto" pelo nome que desejar dar ao seu projeto.

Passo 2: Criando as páginas

O Next.js utiliza o conceito de rotas para a criação de páginas.

Para criar uma nova página, é necessário criar um novo arquivo na pasta "pages" do projeto, com o nome da rota desejada.

Para o nosso exemplo, vamos criar duas páginas: a página inicial ("/") e a página de pesquisa ("/search").

Crie os arquivos "index.js" e "search.js" dentro da pasta "pages".

No arquivo "index.js", adicione o seguinte código:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Meu site Next.js</title>
      </Head>
      <h1>Bem-vindo ao meu site Next.js</h1>
    </div>
  )
}

No arquivo "search.js", adicione o seguinte código:

import Head from 'next/head'
import { useState } from 'react'

export default function Search() {
  const [searchTerm, setSearchTerm] = useState('')
  const [movies, setMovies] = useState([])

  const handleSearch = async (e) => {
    e.preventDefault()
    const res = await fetch(`https://www.omdbapi.com/?s=${searchTerm}&apikey=API_KEY`)
    const data = await res.json()
    setMovies(data.Search)
  }

  return (
    <div>
      <Head>
        <title>Busca de filmes</title>
      </Head>
      <h1>Busca de filmes</h1>
      <form onSubmit={handleSearch}>
        <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
        <button type="submit">Buscar</button>
      </form>
      {movies.map((movie) => (
        <div key={movie.imdbID}>
          <h2>{movie.Title}</h2>
          <img src={movie.Poster} alt={movie.Title} />
        </div>
      ))}
    </div

Passo 3: Estilizando as páginas

Agora que temos as páginas criadas, é hora de estilizá-las. O Next.js permite a utilização de diversos pré-processadores CSS, como Sass e Less, além do CSS puro.

Para este tutorial, vamos utilizar o CSS puro para estilizar as nossas páginas. Para isso, crie um novo arquivo "styles.css" na pasta "public".

Em seguida, adicione o seguinte código:

body {
  font-family: sans-serif;
  margin: 0;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

form {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
}

button[type="submit"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #0070f3;
  color: #fff;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

Passo 4: Adicionando conteúdo

Agora que temos as páginas criadas e estilizadas, é hora de adicionar conteúdo.

Para este tutorial, vamos utilizar a API do OMDb (Open Movie Database) para exibir informações sobre alguns filmes.

Para utilizar a API, é necessário obter uma chave de acesso. Para isso, acesse o site https://www.omdbapi.com/ e siga as instruções para obter a sua chave.

Com a chave de acesso em mãos, substitua "API_KEY" pelo valor da sua chave no arquivo "search.js", na linha que faz a requisição à API:

const res = await fetch(`https://www.omdbapi.com/?s=${searchTerm}&apikey=API_KEY`)

Em seguida, adicione alguns filmes à página inicial, no arquivo "index.js":

import Head from 'next/head'

export default function Home() {
  const movies = [
    {
      Title: "The Shawshank Redemption",
      Year: "1994",
      imdbID: "tt0111161",
      Type: "movie",
      Poster: "https://m.media-amazon.com/images/I/51S+CtFQJ+L._AC_SY580_.jpg"
    },
    {
      Title: "The Godfather",
      Year: "1972",
      imdbID: "tt0068646",
      Type: "movie",
      Poster: "https://m.media-amazon.com/images/I/51UVwvC-+NL._AC_SY580_.jpg"
    },
    {
      Title: "The Dark Knight",
      Year: "2008",
      imdbID: "tt0468569",
      Type: "movie",
      Poster: "https://m.media-amazon.com/images/I/51w5y5U5F-L._AC_SY580_.jpg"
    }
  ]

  return (
    <div>
      <Head>
        <title>Meu site Next.js</title>
      </Head>
      <h1>Bem-vindo ao meu site Next.js</h1>
      {movies.map((movie) => (
        <div key={movie.imdbID}>
          <h2>{movie.Title}</h2>
          <img src={movie.Poster} alt={movie.Title} />
        </div>
      ))}
    </div>
  )
}
``

Passo 5: Adicionando busca de filmes

Agora que já temos alguns filmes na página inicial, vamos adicionar a funcionalidade de busca de filmes.

Para isso, crie um novo arquivo "search.js" na pasta "pages". Em seguida, adicione o seguinte código:

import { useState } from 'react'
import Head from 'next/head'

export default function Search() {
  const [searchTerm, setSearchTerm] = useState('')
  const [movies, setMovies] = useState([])

  const handleSearch = async (e) => {
    e.preventDefault()

    const res = await fetch(`https://www.omdbapi.com/?s=${searchTerm}&apikey=API_KEY`)
    const data = await res.json()

    setMovies(data.Search || [])
  }

  return (
    <div>
      <Head>
        <title>Buscar filmes - Meu site Next.js</title>
      </Head>
      <h1>Buscar filmes</h1>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Digite o nome do filme"
        />
        <button type="submit">Buscar</button>
      </form>
      {movies.map((movie) => (
        <div key={movie.imdbID}>
          <h2>{movie.Title}</h2>
          <img src={movie.Poster} alt={movie.Title} />
        </div>
      ))}
    </div>
  )
}

Note que utilizamos o hook "useState" para controlar o valor do campo de busca e a lista de filmes encontrados.

Também utilizamos a propriedade "onSubmit" do formulário para fazer a requisição à API e atualizar a lista de filmes.

Passo 6: Navegação entre as páginas

Agora que temos duas páginas criadas, é importante permitir a navegação entre elas.

Para isso, vamos utilizar o componente "Link" do Next.js.

No arquivo "index.js", adicione o seguinte código para criar um link para a página de busca:

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Meu site Next.js</title>
      </Head>
      <h1>Bem-vindo ao meu site Next.js</h1>
      <Link href="/search">
        <a>Buscar filmes</a>
      </Link>
      ...
    </div>
  )
}

E no arquivo "search.js", adicione o seguinte código para criar um link de volta para a página inicial:

import Link from 'next/link'

export default function Search() {
  return (
    <div>
      <Head>
        <title>Buscar filmes - Meu site Next.js</title>
      </Head>
      <h1>Buscar filmes</h1>
      <Link href="/">
        <a>Voltar para a página inicial</a>
      </Link>
      ...
    </div>
  )
}

Passo 7: Finalizando o projeto

Por fim, podemos adicionar alguns ajustes finais ao projeto, como uma navegação mais completa, uma página de erro personalizada e a adição de um favicon.

1. Criando um layout com navegação

Vamos criar um arquivo "Layout.js" na pasta "components". Nele, vamos definir a estrutura do layout com a barra de navegação e o conteúdo da página.

import Link from 'next/link'

export default function Layout({ children }) {
  return (
    <div>
      <nav>
        <Link href="/">
          <a>Início</a>
        </Link>
        <Link href="/search">
          <a>Buscar filmes</a>
        </Link>
      </nav>
      <main>
        {children}
      </main>
    </div>
  )
}

Em seguida, vamos utilizar o componente "Layout" nas páginas "index.js" e "search.js".

Para isso, basta importá-lo e envolver o conteúdo da página com ele.

No arquivo "index.js", por exemplo, ficará assim:

import Head from 'next/head'
import Layout from '../components/Layout'

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Meu site Next.js</title>
      </Head>
      <h1>Bem-vindo ao meu site Next.js</h1>
      ...
    </Layout>
  )
}

2. Criando uma página de erro personalizada

Vamos criar um arquivo "_error.js" na pasta "pages". Nele, podemos criar uma página de erro personalizada para o nosso site.

export default function Error() {
  return (
    <div>
      <h1>Ops! Ocorreu um erro.</h1>
      <p>Tente novamente mais tarde.</p>
    </div>
  )
}

3. Adicionando um favicon

Por último, vamos adicionar um favicon para o nosso site.

Para isso, crie um arquivo "favicon.ico" na pasta "public" e adicione o seguinte código no arquivo "Head" das páginas:

<Head>
  <title>Meu site Next.js</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Pronto! Agora temos um site completo com navegação, busca de filmes, layout, página de erro personalizada e favicon.

Lembre-se de substituir a API_KEY utilizada no exemplo pela sua própria chave de API do OMDB.

Conclusão

Em resumo, o Next.js é uma ferramenta poderosa para o desenvolvimento web moderno, que permite construir sites e aplicações web de forma eficiente e organizada.

Neste tutorial, aprendemos como criar um site simples de busca de filmes utilizando as principais funcionalidades do Next.js e como personalizar o layout do site com CSS.

Com o conhecimento adquirido, é possível explorar suas funcionalidades e construir projetos mais avançados.

A documentação oficial do Next.js é uma fonte valiosa de informações e exemplos, e a comunidade está sempre disposta a ajudar.