# I want to use the component through the section model in the next js

**URL:** <https://forum.builder.io/t/i-want-to-use-the-component-through-the-section-model-in-the-next-js/1935>\
**Category:** General\
**Created:** [March 18, 2022, 1:51am UTC](https://forum.builder.io/t/i-want-to-use-the-component-through-the-section-model-in-the-next-js/1935 "2022-03-18T01:51:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yjkim](https://avatars.discourse-cdn.com/v4/letter/y/c77e96/32.png) [@yjkim](https://forum.builder.io/u/yjkim)\
**Post date:** [March 18, 2022, 1:51am UTC](https://forum.builder.io/t/i-want-to-use-the-component-through-the-section-model-in-the-next-js/1935/1 "2022-03-18T01:51:19Z")

</div>

I’m sorry if I asked you a silly question.  
I use the [builder.io](http://builder.io) as nextj. and I want to create Navibar in the component folder and import Navibar into \_app.tsx.

Key :3f32d6ed3ae64d03ad541ad7de7cc503

/component/Navigation.tsx

```auto
import {builder, BuilderComponent} from '@builder.io/react';
import Router from 'next/router';

builder.init('3f32d6ed3ae64d03ad541ad7de7cc503');

export const getStaticProps = async context => {
  const content = await builder
    .get('gnb', {url: context.resolvedUrl})
    .promise();

  return {
    props: {content},
    revalidate: true,
    notFound: !content,
  };
};

const MyComponent = () => {
  // console.log(props);

  const onLogin = () => {
    Router.push('/login');
  };
  return (
    <BuilderComponent
      content={props.content}
      context={{
        login: () => {
          onLogin();
        },
        Click: () => {
          alert('Hi');
        },
      }}
      model="gnb"
    />
  );
};
export default MyComponent;

```

\_app.tsx

```auto
import MyComponent from 'components/Navigation';
function MyApp(props) {
   const {Component, pageProps} = props;
  return (
<>
                <MyComponent />
                <Component {...pageProps} />
</>
)
}
export default MyApp;

```