Next.js is a React-based framework that enables developers to build fast, scalable, and production-ready web applications. It enhances React by adding features like server-side rendering (SSR), static site generation (SSG), and an optimized development environment.
export async function getServerSideProps(context) {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
export default function Page({ data }) {
return (
<div>
<h1>Server-Side Rendered Page</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
export default function Page({ data }) {
return (
<div>
<h1>Static Site Generated Page</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
export default function Page({ data }) {
return (
<div>
<h1>Static Site Generated Page</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
/* styles/global.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
/* javascript */
// In your React component or main app file (e.g., App.js or index.js)
import './styles/global.css';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
/* styles/Button.module.css */
.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.button:hover {
background-color: #007B9A;
}
/* javascript */
// In your React component
import React from 'react';
import styles from './styles/Button.module.css';
function Button() {
return <button className={styles.button}>Click Me</button>;
}
export default Button;
function App() {
return (
<div className="bg-gray-100 p-4">
<h1 className="text-3xl text-blue-600 font-bold">Hello, Tailwind!</h1>
<button className="bg-blue-500 text-white p-2 rounded hover:bg-blue-700">
Click Me
</button>
</div>
);
}
export default App;
I’m currently working with InfoMover Technologies, gaining hands-on experience in programming languages such as Java and Python . I am diving into web development with Python. I have also gained practical experience in Python, JavaScript, and the Django Rest Framework, working on web applications and building APIs. At InfoMover, I...