Skip to content

coffeecupjapan/miniNextjsWebpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

これは何か?

mini next.js を作るという記事があったが、vite を使っていて「魔法」に見えてしまったので、getServerSideProps つきの簡単な next.js もどきを自分で作ろうという試み。

使い方

  1. pages配下にサーバーサイドで実行させたいコード(getServerSideProps.jsと命名しないといけない)と、フロントで表示させたいReactのコード(index.jsxと命名しないといけない)を追加します。 ただこれだけでは足りないと思うので、その他のコンポーネントは、src配下に置き、pages配下からインポートします。

例:pages フォルダ配下に、/pages/hoge /pages/test /pages/test/nest のフォルダがあり、そこに getServerSideProps.jsindex.jsx があると思います。この index.jsx がエントリーポイントになりますが、内部では src 配下の Test というコンポーネントを呼び出しています。

  1. サーバーを立ち上げます。立ち上げるには以下のコマンドを打てば立ち上がります。
node ./next/index.js
  1. pages のディレクトリのパスに沿って、URLにアクセスします。 例えば、/pages/test/nestgetServerSideProps.jsindex.jsx を置いている場合は、localhost:3002/test/nest からアクセスできます。

実装してない部分

  • Link・Router
  • hydrate(サーバーサイドでReactのHTMLを生成するのではなく、webpackを使いフロントで生成している)
  • SSG

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published