Trabalhando com Config.json e configurando o styled-components em um projeto Next.Js

Olá, seja muito bem vindo(a), No projeto da criação do e-commerce construí o banner pegando o código HTML e CSS anterior, porém, coloquei o link imagem do banner em um arquivo de configurações json para facilitar na hora das modificações.

Primeiro eu criei um arquivo chamado config.json na raiz do projeto e adicionei o seguinte:

{
 "imageBanner": "https://images.unsplash.com/photo-1509366812838-b768dc7a8b3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
}

Agora, dentro do arquivo do componente Banner eu importei o config.json e adicionei na estilização do Banner um “link” para a url da imagem que está dentro do config.json, dessa forma se mudarmos o link no config a imagem muda no Banner, isso é interessante se tivermos vários locais mostrando o mesmo banner, por exemplo.

import config from "../../../config.json"

…

 background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(${config.imageBanner});

Outro ponto foi configurar o Styled Components no Next.js pois no meu não estava funcionando a estilização quando eu fui fazer a estilização no Banner, para isso inicialmente eu entrei em https://github.com/vercel/next.js/tree/canary/examples/with-styled-components e copiei o conteúdo do arquivo next.config.js. 

/** @type {import('next').NextConfig} */

const nextConfig = {
 reactStrictMode: true,
 compiler: {
styledComponents: true,
 },
}

module.exports = nextConfig

Após isso, eu criei um arquivo next.config.js na raiz do meu projeto e apenas colei esse código. Uma observação, podemos usar esse arquivo para configurar muitas outras coisas caso necessário, nesse caso vamos configurar apenas o styled components mesmo.

Após essa configuração o styled components passou a funcionar perfeitamente nos arquivos de componentes, sendo que eu coloquei todo o estilo no index.js mas irei fazer outro arquivo javascript apenas para o css-in-js. Por agora é isso, deixo um abraço e até a próxima.

Artigo Original: https://programacao-descomplicada.blogspot.com/2022/11/trabalhando-com-configjson-e.html