Mastering Next.js: 50 Comprehensive Interview Questions and Answers

1
// .env.local
2
API_KEY=your-api-key
3
DATABASE_URL=your-database-url
4

5
// Access the key
6
const apiKey = process.env.API_KEY;

1
export async function getServerSideProps(context) {
2
  const data = await fetchData();
3
  return {
4
    props: { data }
5
  };
6
}

1
export async function getStaticProps() {
2
  const data = await fetchData();
3
  return {
4
    props: { data }
5
  };
6
}

1
class MyComponent extends React.Component {
2
  static async getInitialProps() {
3
    const data = await fetchData();
4
    return { data };
5
  }
6
}

1
import { createContext, useContext, useState } from 'react';
2

3
const MyContext = createContext();
4

5
export const MyProvider = ({ children }) => {
6
  const [state, setState] = useState(initialState);
7

8
  return (
9
    <MyContext.Provider value={{ state, setState }}>
10
      {children}
11
    </MyContext.Provider>
12
  );
13
};

1
import { MyProvider } from '../context/MyContext';
2

3
function MyApp({ Component, pageProps }) {
4
  return (
5
    <MyProvider>
6
      <Component {...pageProps} />
7
    </MyProvider>
8
  );
9
}
10

11
export default MyApp;

1
import { useContext } from 'react';
2
import { MyContext } from '../context/MyContext';
3

4
function MyComponent() {
5
  const { state, setState } = useContext(MyContext);
6

7
  // Use state and setState here
8

9
  return <div>...</div>;
10
}

1
// store.js
2
import { createStore } from 'redux';
3
import rootReducer from './reducers';
4

5
const store = createStore(rootReducer);
6

7
export default store;

1
// pages/_app.js
2
import { Provider } from 'react-redux';
3
import store from '../store';
4

5
function MyApp({ Component, pageProps }) {
6
  return (
7
    <Provider store={store}>
8
      <Component {...pageProps} />
9
    </Provider>
10
  );
11
}
12

13
export default MyApp;

1
import { connect } from 'react-redux';
2

3
const MyComponent = ({ data }) => {
4
  // Use data from the Redux store
5
  return <div>{data}</div>;
6
};
7

8
const mapStateToProps = (state) => ({
9
  data: state.data,
10
});
11

12
export default connect(mapStateToProps)(MyComponent);

1
// Action creator using Redux Thunk
2
export const fetchData = () => {
3
  return async (dispatch) => {
4
    dispatch({ type: 'FETCH_REQUEST' });
5
    try {
6
      const response = await fetch('https://api.example.com/data');
7
      const data = await response.json();
8
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
9
    } catch (error) {
10
      dispatch({ type: 'FETCH_FAILURE', payload: error });
11
    }
12
  };
13
};

1
// Saga to handle data fetching
2
function* fetchDataSaga() {
3
  yield put({ type: 'FETCH_REQUEST' });
4
  try {
5
    const response = yield call(fetch, 'https://api.example.com/data');
6
    const data = yield call([response, 'json']);
7
    yield put({ type: 'FETCH_SUCCESS', payload: data });
8
  } catch (error) {
9
    yield put({ type: 'FETCH_FAILURE', payload: error });
10
  }
11
}

1
// Import statements
2
import { createStore, applyMiddleware, compose } from 'redux';
3
import rootReducer from './reducers';
4

5
// Compose enhancers
6
const composeEnhancers = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
7

8
// Create the Redux store
9
const store = createStore(
10
  rootReducer,
11
  composeEnhancers(applyMiddleware(/* middleware here */))
12
);
13

14
export default store;

1
// pages/api/myRoute.js
2

3
import { NextApiRequest, NextApiResponse } from 'next';
4

5
export default (req, res) => {
6
  // Handle the request and send a response
7
  res.status(200).json({ message: 'Hello from the API!' });
8
};

1
import Link from 'next/link';
2

3
<Link href="/about">
4
  <a>About</a>
5
</Link>

1
// pages/products/index.js (Parent Route)
2
import { useRouter } from 'next/router';
3

4
function Product() {
5
  const router = useRouter();
6

7
  return (
8
    <div>
9
      <h1>Product Page</h1>
10
      <button onClick={() => router.push('/products/details')}>Go to Details</button>
11
    </div>
12
  );
13
}
14

15
export default Product;
16

17

18
// pages/products/details.js (Child Route)
19
import { useRouter } from 'next/router';
20

21
function ProductDetails() {
22
  const router = useRouter();
23

24
  return (
25
    <div>
26
      <h1>Product Details Page</h1>
27
      <button onClick={() => router.push('/products')}>Go back to Products</button>
28
    </div>
29
  );
30
}
31

32
export default ProductDetails;

1
// MyComponent.test.js
2
import React from 'react';
3
import { render, screen, fireEvent } from '@testing-library/react';
4
import MyComponent from './MyComponent';
5

6
test('renders the component correctly', () => {
7
  render(<MyComponent />);
8
  const element = screen.getByText('Hello, World!');
9
  expect(element).toBeInTheDocument();
10
});
11

12
test('handles click event', () => {
13
  const handleClick = jest.fn();
14
  render(<MyComponent onClick={handleClick} />);
15
  const button = screen.getByRole('button');
16
  fireEvent.click(button);
17
  expect(handleClick).toHaveBeenCalled();
18
});