<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/React">React</a></p><h2>[Next.js] 시작하기</h2>
                    <p><cite>
                        <span>JayLee</span>
                    </cite>
                </p></div>
                <p><time>2021. 9. 9. 22:14</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <figure data-origin-width="192" data-origin-height="192" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/J3Zcv/btreB7SJDt3/7nXtlGwgcDFD7kth06GvY1/img.png" data-lightbox="lightbox" data-alt="Next.js"><img src="https://blog.kakaocdn.net/dn/J3Zcv/btreB7SJDt3/7nXtlGwgcDFD7kth06GvY1/img.png" data-origin-width="192" data-origin-height="192" data-ke-mobilestyle="widthOrigin"></span><figcaption>Next.js</figcaption></figure>
<h3 data-ke-size="size23">시스템 요구사항</h3>
<ul data-ke-list-type="disc">
<li>Node.js 12.0 이상</li>
<li>MacOS, Windows 그리고 Linux</li>
</ul>
<h3 data-ke-size="size23">세팅</h3>
<p data-ke-size="size16">새로운 next.js 앱을 생성하기 위해서는 'create-next-app'을 사용하길 추천한다. 'create-next-app'은 프로젝트의 필요한 모든 것을 세팅해 줍니다.</p>
<pre id="code_1631178149557" data-ke-language="shell" data-ke-type="codeblock"><code>npx create-next-app 
# or 
yarn create next-app</code></pre>
<p data-ke-size="size16">만약 TypeScript 프로젝트로 시작하기 원한다면 '—typescript' 플래그를 사용하면 됩니다.</p>
<pre id="code_1631178160886" data-ke-language="shell" data-ke-type="codeblock"><code>npx create-next-app --typescript 
# or 
yarn create next-app --typescript</code></pre>

<p data-ke-size="size16">위 명령어를 이용하여 typescript를 사용하는 프로젝트를 만들어보았습니다. 프로젝트 이름은 'next-test-app'으로 했습니다.</p>
<pre id="code_1631193131723" data-ke-language="shell" data-ke-type="codeblock"><code>npx create-next-app --typescript next-test-app</code></pre>
<p data-ke-size="size16">하위 폴더에 next-test-app 이라는 폴더로 프로젝트가 생성된 것을 확인할 수 있었습니다.</p>


<p data-ke-size="size16">Manual Setup 방법은 아래 링크를 참조하세요.</p>

<figure id="og_1631178133221" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Getting Started | Next.js" data-og-description="Get started with Next.js in the official documentation, and learn more about all our features!" data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/getting-started#manual-setup" data-og-url="https://nextjs.org/docs/getting-started" data-og-image="https://scrap.kakaocdn.net/dn/cp3tGs/hyLxDSn98G/Fkkoii4m3705p2CUuesK71/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"><a href="https://nextjs.org/docs/getting-started#manual-setup" target="_blank" rel="noopener" data-source-url="https://nextjs.org/docs/getting-started#manual-setup">

<div>
<p data-ke-size="size16">Getting Started | Next.js</p>
<p data-ke-size="size16">Get started with Next.js in the official documentation, and learn more about all our features!</p>
<p data-ke-size="size16">nextjs.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/cp3tGs/hyLxDSn98G/Fkkoii4m3705p2CUuesK71/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"></figure>


<p data-ke-size="size16">참고:</p>

<figure id="og_1631192969580" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Getting Started | Next.js" data-og-description="Get started with Next.js in the official documentation, and learn more about all our features!" data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/getting-started" data-og-url="https://nextjs.org/docs/getting-started" data-og-image="https://scrap.kakaocdn.net/dn/hZmso/hyLxKc3J1w/28bA0lGl4kU9mre9AET4q0/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"><a href="https://nextjs.org/docs/getting-started" target="_blank" rel="noopener" data-source-url="https://nextjs.org/docs/getting-started">

<div>
<p data-ke-size="size16">Getting Started | Next.js</p>
<p data-ke-size="size16">Get started with Next.js in the official documentation, and learn more about all our features!</p>
<p data-ke-size="size16">nextjs.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/hZmso/hyLxKc3J1w/28bA0lGl4kU9mre9AET4q0/img.png?width=2048&amp;height=1170&amp;face=0_0_2048_1170"></figure>

                                                            
                                
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

Hello Jay's Programming World!

시스템 요구사항
Node.js 12.0 이상
MacOS, Windows 그리고 Linux
세팅
새로운 next.js 앱을 생성하기 위해서는 'create-next-app'을 사용하길 추천한다. 'create-next-app'은 프로젝트의 필요한 모든 것을 세팅해 줍니다.
npx create-next-app 
# or 
yarn create next-app
만약 TypeScript 프로젝트로 시작하기 원한다면 '—typescript' 플래그를 사용하면 됩니다.
npx create-next-app --typescript 
# or 
yarn create next-app --typescript
 
위 명령어를 이용하여 typescript를 사용하는 프로젝트를 만들어보았습니다. 프로젝트 이름은 'next-test-app'으로 했습니다.
npx create-next-app --typescript next-test-app
하위 폴더에 next-test-app 이라는 폴더로 프로젝트가 생성된 것을 확인할 수 있었습니다.
 
 
Manual Setup 방법은 아래 링크를 참조하세요.
 
 
 
참고:

[Next.js] 시작하기

댓글