Next Framework won't even return me a console.log - next.js

Question

Just as the title said, i cannot fetch data from a json neither display a console log from _app.js in NextJS.
My code:
//pages/_app.js
import '../css/font-awesome.min.css'
import '../css/owl.carousel.css'
import '../css/owl.transitions.css'
import '../css/animate.min.css'
import '../css/lightbox.css'
import 'bootstrap/dist/css/bootstrap.css'
import '../css/preloader.css'
import '../css/image.css'
import '../css/icon.css'
import '../css/style.css'
import '../css/responsive.css'
import '../styles/globals.css'
import 'react-responsive-carousel/lib/styles/carousel.min.css'
function MyApp({ Component, pageProps, json }) {
return <Component {...pageProps} json={json}/>
}
export async function getStaticProps() {
console.log("test")
const res = await api.get("./api/test.json");
console.log(res)
const json = res.data;
console.log(json);
return {
props: {
json,
},
};
}
export default MyApp
I doesn't return anything in console... I need to link the frontend and the backend but i cannot make it to work. Tried with getStaticProps, getInitialProps, etc... But it doesn't return anything on console. Even when the function is called it gives me undefined with a local json.
Another approach
//pages/api/bienvenido.js
const Bienvenido = ({ bienvenidos, error }) => {
if (error) {
return <div>An error occured: {error.message}</div>;
}
return (
<ul>
{bienvenidos.map(bienvenido => (
<li key={bienvenido.id}>{bienvenido.id}</li>
))}
</ul>
);
};
Bienvenido.getInitialProps = async ctx => {
try {
// Parses the JSON returned by a network request
const parseJSON = resp => (resp.json ? resp.json() : resp);
// Checks if a network request came back fine, and throws an error if not
const checkStatus = resp => {
if (resp.status >= 200 && resp.status < 300) {
return resp;
}
return parseJSON(resp).then(resp => {
throw resp;
});
};
const headers = {
'Content-Type': 'application/json',
};
const bienvenidos = await fetch('test.json', {
method: 'GET',
headers,
})
.then(checkStatus)
.then(parseJSON);
return { bienvenidos };
} catch (error) {
return { error };
}
};
export default Bienvenido;
This returns Undefined on this line "const Bienvenido = ({ bienvenidos, error }) => {"